web-dev-qa-db-ja.com

Googleはv3のデフォルトのマーカーパスを他の色でマップします

私の目標は、見栄えの良いデフォルトのグーグルマップマーカーの色を変更することです。したがって、デフォルト（赤）のもののパス/形状を探しています。私はこれが色に変わるのを見つけました：

function pinSymbol(color) {
    return {
        path: '???' 
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
    };
}

そのため、関数を呼び出して色を変更したいと思います（例：アイコン：pinSymbol（ "＃666"）。ただし、パスの場所がわかりませんか？v2 /プレーンマーカーを探していません。 ！！

New marker

//編集：このパスを見つけました：

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 M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',

（質問への回答から： Google Maps API 3-デフォルト（ドット）マーカーのカスタムマーカーの色 ）

滑らかなグラデーションを生成する方法は？

google-mapsgoogle-maps-api-3colorsgoogle-maps-markers
12
wiesson

質問で指定したパスを使用する：

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: 1,
        scale: 1
    };
}

概念実証フィドル

screenshot of resulting map

コードスニペット：

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: 1,
    scale: 1
  };
}
function initialize() {
  var latlng = new google.maps.LatLng(47.605, -122.333);
  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('green')
  });
  var marker2 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.6, -122.2),
    icon: pinSymbol('orange')
  });
  var marker3 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.7, -122.1),
    icon: pinSymbol('yellow')
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
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" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div id="content_window"></div>
2
geocodezip

実際のマップのコードを調べたところ、Google Maps JS API V3ではマーカーのデフォルトURLは https://maps.gstatic.com/mapfiles/api-3/images/spotlight）であることがわかりました。 -poi.png であり、マーカー自体は22x40PNGファイルです。色を変更するには、CSSフィルター/ JSなどを使用するか、ラスターグラフィックエディターで手動で色を変更する必要があります。

map marker PNG

1
vaxquis

これを行うことでアイコンを変更できると思いますmarker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

または、 マーカー画像のドキュメントをカスタマイズする を参照することもできます。

また、パスに 事前定義されたシンボル を使用することもできます。サンプルコード：

var marker = new google.maps.Marker({
    id: "some-id",
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        strokeColor: "red",
        scale: 3
    },
    map: map,
    title: "some-title",
    position: myLatlng
});
0
ztan