在Google Maps API中更改颜色多个标记

Question

I would like to ask about how to change color of a marker in google maps. The condition is, I have a program to create multiple markers in google maps. But how I can give specified color to each marker?

this is my code for now,

 var markers = []; var map; var labels = 'ABCD'; var labelIndex = 0; function addMarker(location) { var marker = new google.maps.Marker({ position: location, label: labels[labelIndex++ % labels.length], icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' map: map }); markers.push(marker); 

Answer 1

One way would be to pass the color into the addMarker function:

function addMarker(location, color) {
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    icon: 'http://maps.google.com/mapfiles/ms/icons/'+color+'.png',
    map: map
  });
  markers.push(marker);
}

proof of concept fiddle

code snippet:

 var markers = []; var map; var labels = 'ABCD'; var labelIndex = 0; function initialize() { map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(40.7127837, -74.0059413), zoom: 11, mapTypeId: google.maps.MapTypeId.ROADMAP }); // New York, NY, USA (40.7127837, -74.0059413) // Newark, NJ, USA (40.735657, -74.1723667) // Jersey City, NJ, USA (40.72815749999999, -74.07764170000002) // Bayonne, NJ, USA (40.6687141, -74.11430910000001) addMarker({ lat: 40.7127837, lng: -74.0059413 }, "red"); addMarker({ lat: 40.735657, lng: -74.1723667 }, "green"); addMarker({ lat: 40.7281575, lng: -74.0776417 }, "yellow"); addMarker({ lat: 40.6687141, lng: -74.1143091 }, "orange"); } google.maps.event.addDomListener(window, "load", initialize); function addMarker(location, color) { var marker = new google.maps.Marker({ position: location, label: labels[labelIndex++ % labels.length], icon: { url: 'http://maps.google.com/mapfiles/ms/icons/' + color + '.png', labelOrigin: new google.maps.Point(15, 10) }, map: map }); markers.push(marker); } 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div>