読者です 読者をやめる 読者になる 読者になる

だめグラマーの独り言

40過ぎのおっさんがWeb系プログラム関連のいろいろを多分に私見で綴るブログ

GoogleMapにマーカーを表示する

昨日の続き。

地図を表示させただけじゃなくてマーカーを表示してみましょ。
地図を描くまではまったく一緒。
その後、google.maps.event.addDomListener内に

// マーカー表示する緯度経度を指定するLatLng型の変数作成
var pos = new google.maps.LatLng(xx.xxxxx, yy.yyyyy);

// そのポジションへマーカーを立てる一文
marker = new google.maps.Marker(
{
  position:pos, // マーカーを立てる位置
  map:map, // マーカーを表示するMapオブジェクト
  title:'ひゃっはー' //マーカーにマウスオーバーした時に表示される文字列
});

これでpositionの場所にデフォルトのマーカーが表示されます。
google.maps.Markerにはオプションがいっぱいあって

オプション名 説明
clickable boolean true の場合、マーカーはイベントイベントを受け取る。デフォルト値は trueなので普通は指定する必要なし。
cursor string マウスオーバー時に表示されるマウスのカーソル。
draggable boolean trueの場合、マーカーをドラッグ可。デフォルト値は false。
flat boolean true の場合、マーカーの影は表示されない。
icon string,MarkerImage 前面のアイコン。Googleで用意されたアイコンや自前のアイコンも使える。(URL指定)
map Map,StreetViewPanorama マーカーを表示する地図。(必須)
positi6on LatLng マーカーの位置。(必須)
shadow string,MarkerImage 影の画像。自前でも作成可能(URL指定)
shape MarkerShape ドラッグ/クリック用の画像マップの領域の定義。
title string マウスをマーカーにロールオーバーした時に表示されるテキスト。
visible boolean trueの場合、マーカーが表示。
zIndex number 地図上のすべてのマーカーがzIndex順に表示されるが、デフォルトでは、緯度を基準に低緯度が手前で重なるのでデフォでおk。

マーカーを設置した後で、JavaScriptでオプションを変更することも可能。
setOptionsって関数がある。
ちなみにmapオブジェクトのオプション(縮尺や中心位置等)も変更できるので、Mapの外から何かのボタンをおすことで、Mapの見た目を変更したりマーカーの位置や見た目を変更することも可能。

次回は地図に複数のマーカーを置いてみよう。