FC2ブログ

google map でマーカーと情報ウインドウの連動

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
に便利なメソッドがある
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック