カスタムアイコンを使ったマーカー

API V2からマーカーに独自のアイコンを指定することができるようになりました。

カスタムアイコンを指定するにはアイコンとして表示する画像のURLを「icon:URL」として指定します。

markers=icon:URL|座標1|座標2|...

カスタムアイコンを指定する場合の制限は次の通りです。

・画像のフォーマットはPNG、JPEG、GIF
・最大サイズは4096ピクセル(64ピクセル×64ピクセル)
・1つのURL内で指定可能なカスタムアイコンは5つ

またデフォルトでは影を表示しますが、明示的にshadow:falseを指定することで影を表示しない事も可能です。

markers=icon:URL|shadow:false|座標1|座標2|...

ここで注意が必要なのがアイコンのどの部分がマーカーを設置した座標を指し示しているかです。shadow:trueと設定するか又は省略した場合はアイコンの最下部の中央の地点がマーカーを設置した座標を表します。それに対してshadow:falseと指定した場合はアイコンの中央がマーカーを設置した座標を表します。

記述例としては次のようになります。

http://maps.google.com/maps/api/staticmap?
markers=icon:http://www.example.com/markericon.png|34.980678,135.747671

※実際は1行です。

サンプル

では実際に試してみます。

http://maps.google.com/maps/api/staticmap?
&center=34.985073,135.757542
&zoom=13
&size=400x400
&markers=icon:http://URL/hatena.png|34.980678,135.747671
&markers=icon:http://URL/circle.png|shadow:false|34.994826,135.784932
&sensor=false

※URLと書かれたところには実際には画像を設置しているURLを記述しています。

-

「東寺」は影付きで表示していますが「清水寺」の方は影を表示していません。影が無い場合はマーカーとして表示されているカスタムアイコンの中心がマーカーが指し示す座標を表しています。

AjaxTower