简体   繁体   中英

Google Maps: add multiple map markers

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM