Google地图上的多个标记带有不同的图标？

Question

I'm trying to use multiple Markers on google maps with different icons.

something like this:

var locations = [
    ['Me', 'ss00sd', 'meicon.png'],
    ['Location 2 Name', 'rm191qw', 'house.png'],
    ['Location 3 Name', 'ss68ll', 'house.png'],
];

but I have no idea how to achieve this.

I have created this jsfiddle with what I have so far: http://jsfiddle.net/1Lf0rowp/

EDIT: I noticed the code doesn't run in jsfiddle for some reason it works fine in my own page! but I have included all my code in jsfiddle as well.

code snippet (from jsfiddle):

 var locations = [ ['Location 1 Name', 'ss00sd', 'meicon.png'], ['Location 2 Name', 'rm191qw', 'house.png'], ['Location 2 Name', 'ss68ll', 'house.png'], ]; var geocoder; var map; var bounds = new google.maps.LatLngBounds(); function initialize() { map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); geocoder = new google.maps.Geocoder(); for (i = 0; i < locations.length; i++) { geocodeAddress(locations, i); } } google.maps.event.addDomListener(window, "load", initialize); function geocodeAddress(locations, i) { var title = locations[i][0]; var address = locations[i][1]; var url = locations[i][2]; geocoder.geocode({ 'address': locations[i][1] }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var marker = new google.maps.Marker({ icon: 'meicon.png', map: map, position: results[0].geometry.location, title: title, animation: google.maps.Animation.DROP, address: address, url: url }) infoWindow(marker, map, title, address, url); bounds.extend(marker.getPosition()); map.fitBounds(bounds); } else { alert("geocode of " + address + " failed:" + status); } }); } function infoWindow(marker, map, title, address, url) { google.maps.event.addListener(marker, 'click', function () { var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div></p></div>"; iw = new google.maps.InfoWindow({ content: html, //maxWidth: 350 }); iw.open(map, marker); }); } function createMarker(results) { var marker = new google.maps.Marker({ icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png', map: map, position: results[0].geometry.location, title: title, animation: google.maps.Animation.DROP, address: address, url: url }) bounds.extend(marker.getPosition()); map.fitBounds(bounds); infoWindow(marker, map, title, address, url); return marker; } 

 html, body, #map-canvas { margin: 0; padding: 0; height: 100%; } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas" style="width:100%; height:900px;"></div> 

Answer 1

You are very close, just include url after icon: when you're creating Marker:

var marker = new google.maps.Marker({
                icon: url,

I have changed your fiddle a bit to make it work : you have forgot to invoke initialize() and also changed url data to your icons, so now your locations array looks like this:

 var locations = [
        ['Location 1 Name', 'ss00sd', 'http://cdn.leafletjs.com/leaflet-0.6.4/images/marker-icon.png'],
        ['Location 2 Name', 'rm191qw', 'https://www.mapsmarker.com/wp-content/plugins/leaflet-maps-marker-pro/leaflet-dist/images/marker.png'],
        ['Location 2 Name', 'ss68ll', 'http://www.worldheritageoutlook.iucn.org/resources/heritage_site_map_pin.png'],
    ];

Working fiddle: http://jsfiddle.net/1Lf0rowp/1/