GoogleマップAPI 〜ブログに地図を表示しよう その2
Googleマップカスタマイズ2回目は、地図にマーカーを表示する方法です。
前回作成した地図（こちら）は、指定した場所が中心にあるけれど具体的にどこを指しているのかわかりません。
そこで、「マーカー」と呼ばれる印をつけることにします。
GoogleAPIではマークを付けるために「GMarker」というクラスが用意されています。
位置を渡してオブジェクトを作成し、addOverlayを使ってマーカーを表示します。
var point = new GLatLng(35.666623, 139.713371); //前回調べた弊社の緯度と経度
var marker = new GMarker(point); //マーカーオブジェクトを作成
map.addOverlay(marker); //マップに重ねる
これで、標準のピンクのマーカーを出すことができました。
→サンプル
次に、マーカーを自分で作成した画像に変更してみます。
GMarkerクラスのほかに、GIconクラスを使用します。
まずオブジェクトを作成します。
var icon = new GIcon(baseIcon);
そして、アイコンについていくつかプロパティを設定します。
最低限必要なプロパティは以下の3つです。
1. アイコンのURLを指定します。
icon.image = "arrow.png";
2. アイコンのサイズを指定します。
icon.iconSize = new GSize(83, 93);
3. 画像のどの位置を中心にするか座標を(X,Y)で指定します。
icon.iconAnchor = new GPoint(41, 92);
GMarkerの2項目の引数に、設定したiconを渡します。
var marker = new GMarker(point, icon);
そしてaddOverlayで表示します。
map.addOverlay(marker);
→サンプル
その他、影を付けるプロパティもあります。
Google Maps API V2のリファレンスは下記です。（英語）
http://www.google.com/apis/maps/documentation/reference.html
次回（最後）は、「地図にコントロールボタンを付ける」です。