My setup currently I have a custom map marker for multiple points on my map, but I want to add different map markers for different markers on the map dependant on their type
attribute. My current setup as follows:
HTML
<div class="marker" data-lat="LATITUDE_GOES_HERE" data-lng="LONGITUTE_GOES_HERE" type="library">
jQuery (just the marker function)
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
// create marker
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon: iconBase + 'schools_maps.png'
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
This works great, but how would I had a different marker icon for different markers on the map, dependant on the type
attribute they have (if possible)?
Any suggestions would be greatly appreciated!
You mean something like.....
var iconName = "";
var type = $marker.attr("type");
if (type == "library")
iconName = "library.png";
else if (type == "school")
iconName = "school.png";
// ...etc...
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon: iconBase + iconName;
});
Of course, you would have to provide (and probably host) the icons yourself...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.