SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

GoogleMapsのピンの色を変えたい

問題

自分でGoogelMapsにピンを表示するときに、色を変えるのはどうしたらよい?

答え

パスを描いたり複雑なことも可能だが、
URLでiconを指定すればとても簡単。

https://maps.google.com/mapfiles/ms/icons/red-dot.png

https://maps.google.com/mapfiles/ms/icons/blue-dot.png

https://maps.google.com/mapfiles/ms/icons/green-dot.png

https://maps.google.com/mapfiles/ms/icons/yellow-dot.png

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|0099cc|

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=X|6699cc|000000

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=X|6699cc|000000

http://chart.apis.google.com/chart?chst=d_simple_text_icon_left&chld=%E3%81%8C%E3%82%93%E3%81%B0%E3%82%8C%E6%97%A5%E6%9C%AC%EF%BC%81%7C16|00F|flag_ja|16|F88|FFF

http://maps.google.co.jp/mapfiles/ms/icons/tree.png

https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png&scale=1

関連するメモ

コメント(2)

toyo 2018年7月11日 19:25

URLでiconを指定すればとても簡単。
ってことですが、どこにどう埋め込まばいいんでしょうか?
(初心者です)よろしくお願いします。

yoshimura 2018年7月20日 09:54

new google.maps.Marker(~) するときにマーカーのアイコンを指定できたと思います。

new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
title: “サンプル”,
icon: “https://maps.google.com/mapfiles/ms/icons/red-dot.png”,
map: map
});