google map でマーカーと情報ウインドウの連動
#08 マーカーと情報ウィンドウの連動
http://dotinstall.com/lessons/basic_google_maps/3508
を参考に
マーカーを地図上に表示させ、クリックしたら情報ウィンドウが開くように設定
マーカーと情報ウインドウの組み合わせは
多く使われていて地図上のマーカーをクリックしたら情報ウインドウがでるようにする
まず、情報ウインドウの作成
ただし position はクリックしたときの場所にするので
今回は省略
var infoWindow = new google.maps.InfoWindw({
content: ‘渋谷あたり’
});:
content: ‘渋谷あたり’
としたので、情報ウインドウにはこのメッセージがでる
次に、マーカーを作成
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
position: map.getCenter(),
で地図の中心に設定
map: map
は
var map で指定したマップ
そして、このマーカーに対して
クリックしたら infoWindow を表示するイベントを設定
google.maps.event.addListener(marker,’click’,function(){
infoWindow.open(map,marker);
});
marker,’click’,
と指定したので
marker をクリックしたら
infoWindow.open(map,marker);
が実行される
open() の第2引数に
marker を指定したことにより
marker の位置に情報ウインドウを表示するようになる
使い道として多いのが
web api で建物や施設情報、飲食店を取得
地図にアイコンで表示して
クリックしたら詳細情報ウインドウ表示というもの
あと場所を指定するときには
getCenter() 以外には
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#Map
に便利なメソッドがある