How to customize Map Marker:
This blog will help you understand how to customize the markers in google map. Specify the icon
option on MarkerOptions
to change the marker’s icon. The icon
option can be either a string (the URL to the marker icon), or an Icon
object. Write this simple lines of code:
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: iconBase + 'schools_maps.png'
});
For different marker icons we can customize in this way:
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
All done!
Thanks for reading the blog
0 Comment(s)