Google Maps : Custom icon & Label for Every Marker
I have found a code to show Google maps with multiple markers using JQuery & xml.
see live Example
I have marker.js like this
$(document).ready(function() {
$("#map").css({
height: 500,
width: 800
});
var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
MYMAP.init('#map', myLatLng, 11);
$("#map");
MYMAP.placeMarkers('markers.xml');
});
var MYMAP = {
map: null,
bounds: null
}
MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}
MYMAP.placeMarkers = function(filename) {
$.get(filename, function(xml){
$(xml).find("marker").each(function(){
var name = $(this).find('name').text();
var address = $(this).开发者_如何学JAVAfind('address').text();
var icon = $(this).find('icon').text();
// create a new LatLng point for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
// extend the bounds to include the new point
MYMAP.bounds.extend(point);
var marker = new google.maps.Marker({
position: point,
map: MYMAP.map
});
var infoWindow = new google.maps.InfoWindow();
var html='<strong>'+name+'</strong.><br />'+address;
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(MYMAP.map, marker);
});
MYMAP.map.fitBounds(MYMAP.bounds);
});
});
}
& xml code I am using.
<marker>
<name>.hu</name>
<address>near Viswa Teja School, Thatichetlapalem, Visakhapatnam</address>
<lat>47.29</lat>
<lng>19.05</lng>
</marker>
What I want is custom marker icon & Label for Every marker.
Is it possible to work within above codes ?
OR how can I achieve this ?
You can do this with something like the following:
new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: MYMAP.map,
icon: new google.maps.MarkerImage("<REPLACE_WITH_MARKER_IMAGE_URL>")});
Also, here is the relevant documentation.
After Lots of Googling & experimenting I have finally settled to this. An easier way to customize your Gmaps.
Hope this will help for newbies here, like me!
DEMO HERE
Thanks!
精彩评论