私の選択した色にgoogle map markerの色を変更してください

Question

デフォルトの赤いマーカーの色から自分の選択した16進の色に変更する必要はありますか？私はスタックオーバーフローのすべてを見てきましたが、私は答えを見つけることができませんでした。これは私がこれまで持っていたものです。

var marker = new google.maps.Marker({ 
      position: myLatLng, 
      label: '23', 
      map: map 
     }); 

Answer 1

マーカーは色のプロパティ/属性を持っていないあなたは色変更アイコン

をcangheことができるようにグーグルマップが

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
var beachMarker = new google.maps.Marker({ 
    position: {lat: -33.890, lng: 151.274}, 
    map: map, 
    icon: image 
}); 

をデベロッパーより..マーカーは、アイコンを使用し、これはあります

Answer 2

1つのオプションは、マーカーアイコンのSVGシンボルを定義することです。 SVGアイコンの色はコンストラクタで設定できます。

function pinSymbol(color) { 
    return { 
     path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', 
     fillColor: color, 
     fillOpacity: 1, 
     strokeColor: '#000', 
     strokeWeight: 2, 
     scale: 1 
    }; 
} 

次に、このようにそれを使用します。

var marker1 = new google.maps.Marker({ 
    map: map, 
    position: new google.maps.LatLng(47.5, -122.0), 
    icon: pinSymbol('green') 
}); 

proof of concept fiddle

コードスニペット：

function initialize() { 
 
    var latlng = new google.maps.LatLng(47.605, -122.2); 
 
    var myOptions = { 
 
    zoom: 10, 
 
    center: latlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
 
    myOptions); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: latlng, 
 
    icon: pinSymbol('red') 
 
    }); 
 

 
    var marker1 = new google.maps.Marker({ 
 
    map: map, 
 
    position: new google.maps.LatLng(47.5, -122.0), 
 
    icon: pinSymbol('#7CFC00') 
 
    }); 
 
    var marker2 = new google.maps.Marker({ 
 
    map: map, 
 
    position: new google.maps.LatLng(47.6, -122.3), 
 
    icon: pinSymbol('orange') 
 
    }); 
 
    var marker3 = new google.maps.Marker({ 
 
    map: map, 
 
    position: new google.maps.LatLng(47.7, -122.1), 
 
    icon: pinSymbol('yellow') 
 
    }); 
 
} 
 

 
function pinSymbol(color) { 
 
    return { 
 
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', 
 
    fillColor: color, 
 
    fillOpacity: 1, 
 
    strokeColor: '#000', 
 
    strokeWeight: 2, 
 
    scale: 1 
 
    }; 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>