マーカー画像にData URLスキーム（旧Googleマイマップ）データを利用する

GoogleMyMaps（Googleマイマップ）にてこれまで利用されてきた、
シェイプは同じシンボルでカラーバリエーションがあるマーカーでした。
地図の統一感が増し、とても綺麗なマーカー表示が行えますが、
通常ではGoogle Maps APIでは同じアイコンを利用するのは困難です。
ここではGoogleMyMapsで提供されていたシェイプマーカーを、
Google Maps APIで利用する手順をご紹介します。

地図の表示

GoogleMyMapsで標準で利用されるシェイプを、
Data URLスキーム形式でGoogle Maps API表示を行っています。

見慣れたGoogleマイマップのピンアイコンが、
Google Maps API上で表示されているのが分かるかと思います。

GoogleMyMapsシェイプデータ

この手法を利用する場合、
旧Googleマイマップで利用されていた以下のアイコンが利用できます。

JavaScript

上記で埋込表示しているソースは以下を利用しています。
URLを一括で抜きたい場合は以下の方が便利かもしれません。

このようにGoogle Maps APIにおいてマーカー画像に指定するURL部分は、
必ずしもhttp:,https:で始まっているものである必要は無く、
実データをそのまま示す形式の、
Data URLスキーム(scheme)形式も指定できることが分かります。

ただ、この形式でアイコンが提供されていたのは、
１世代前のGoogleマイマップであって、

現在の新しいマイマップではさらに革新的なマーカー表示の仕組みが採用されています。

参考

Google {maps}