Googlemapでオリジナルアイコンを使用する

Googlemapでオリジナルのアイコンを使用するとき、GooglemapAPIのチュートリアルでは、以下のように指定するように書いてあります。
複雑なアイコン

var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));

Google MAPS API V3 の google.maps.Marker で、既定のアイコンを使わずに独自の画像を表示させるサンプルプログラム。を参考に、注釈をつけてみる。

var image = new google.maps.MarkerImage('images/beachflag.png',//アイコン画像パス
new google.maps.Size(20, 32),//(size)アイコン画像のサイズ
new google.maps.Point(0,0),//(origin)アイコン画像表示の起点
new google.maps.Point(0, 32)//(anchor)アイコン画像のどの座標を指定した緯度経度にあてるか
);

この、「(origin)アイコン画像表示の起点」というところと「(anchor)アイコン画像のどの座標を…」が今一つわからなかったので、実直に一つ一つ確かめてみることにしました!

私の作成したアイコン(サイズは64px×64px)
※実際は影は別に作るんだろうけど、面倒なので影入りにしました。

そのアイコンが表示される様子

このアイコンのどこをoriginをいじるとどうなるか

まずは、new google.maps.Point(32,0),

次に、new google.maps.Point(0,32),

となりました。ということは、左上が(0,0)の起点で、そこから何ピクセル右から、または下から表示させて、指定サイズで表示させるということがわかりました。

このアイコンのどこをanchorにして、そのanchorまでの座標をどういう風に図るか

以上を踏まえて、私が指定すべき数値は

var image = new google.maps.MarkerImage('images/beachflag.png',//アイコン画像パス
new google.maps.Size(64, 64),//(size)アイコン画像のサイズ
new google.maps.Point(0,0),//(origin)アイコン画像表示の起点
new google.maps.Point(25, 62)//(anchor)アイコン画像のどの座標を指定した緯度経度にあてるか
);

となりました!

しかし、このアイコン画像表示起点(origin)、普通に作れば(0,0)でよかろうにと思うのですが、
大きな画像の一部をアイコンとして使用したいときなどには便利のようです。

下のようなアイコンを作成しました。

このときに、以下の様にアイコンを設定します。

var image = new google.maps.MarkerImage('images/beachflag.png',//アイコン画像パス
new google.maps.Size(64, 64),//(size)アイコン画像のサイズ
new google.maps.Point(0,64),//(origin)アイコン画像表示の起点
new google.maps.Point(25, 62)//(anchor)アイコン画像のどの座標を指定した緯度経度にあてるか
);

すると、

このように、大きな画像の一部がアイコンとして表示されます。
使い道は今一つわかりませんが、たくさんアイコン作ったりするときや、何かのデータと連動させたりするときは、便利かもしれません。

(origin)や(anchor)の設定の座標の取り方がわからなくなったのは、私が普段、左下を(0,0)と考える癖があるからのようです。
そうではなくて、左上が(0,0)です。普段、使っているFireWorksも左上が基準のはずなのに、なぜだろうなぁ。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です