google map でクリック位置の情報表示
#11 クリック位置の住所を表示する (1)
http://dotinstall.com/lessons/basic_google_maps/3511
を参考に
地図上でクリックした位置にマーカーを表示し、
その情報ウィンドウに住所を表示
これがあれば、迷ったときに使えるかもしれない
今回はマーカー表示
今回の場合
緯度経度から住所の取得
クリックしたところにマーカーが表示され
そこをクリックすると住所が表示されるというもの
流れとしては
地図にイベントを設定
クリックしたらマーカー表示
マーカーをクリックしたら
その緯度経度を元に情報ウインドウに
住所を表示する
というもの
前回、緯度経度から住所を算出し地図を表示したのを使い、これに今回の仕様を追加
ソースは
前回のものを使用する
http://dotinstall.com/lessons/basic_google_maps/3510
のソースを使用
追記するのは
var map = new google.maps.Map(document.getElementById(‘map’),options);
の後あたり
表示してステータスがOKならイベントを設定する
google.maps.event.addListener(map,’click’,function(event){
});
として
マップをクリックしたときにイベントがおきるようにセット
function(event) を使って緯度経度を取得し
マーカーを設置
var marker = new google.maps.Marker({
position: event.latLng,
map:map
});
position : はマーカーをセットする位置で
event.latLng はクリックしたときの座標
map : には、マーカーを設置する対象です
var map で設定した map になる
ここまでできたら動作確認
もし、動かない場合
まちがえやすいところとして
google.maps
を
google.map
にしているというミスに注意