Googleマップで複数のマーカーを変更するAPI

Question

Googleマップでマーカーの色を変更する方法についてお聞きしたいと思います。条件は、私はGoogleマップで複数のマーカーを作成するプログラムがあります。しかし、どのように私は各マーカーに特定の色を与えることができますか？これが今の私のコードです

、

var markers = []; 
 
var map; 
 
var labels = 'ABCD'; 
 
var labelIndex = 0; 
 

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

Answer 1

一つの方法は、addMarker関数に色を渡すために、次のようになります。

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

コードスニペット：

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>