Rakuten

  • 楽天ダウンロード

    楽天市場

おすすめ本

天気予報

最近のトラックバック

  • event (夢茶爺&苦茶爺のPC奮戦備忘録)

カウンタ

VC

admax

« 「GoogleMap API V3」 の使い方その4(イベント) | メイン | 「GoogleMap API V3」 の使い方その6(続々イベント) »

2011年5月27日 (金)

「GoogleMap API V3」 の使い方その5(続イベント)

マーカーのイベントで情報ウインドウを表示

マップ上にマーカーを表示し、そのマーカーをクリックした時に情報ウインドウを表示します。
以下の例は、マーカーのクリックイベントの関数を登録する前で、情報ウインドウを生成しておき、 クリックイベントの関数の中でその情報ウインドウを表示する様にしています。

 





複数のマーカーイベントで情報ウインドウを表示

「使い方その3(マーカーの表示)」で複数のマーカーを表示しましたが、それを拡張してそれぞれのマーカーでクリックしたときに それぞれのマーカーの内容を表示する例を示します。

 


最初の例で説明しましたイベントの処理とは、少し変わった部分があります。 先ず、GoogleMapオブジェクトの変数宣言を関数の外に置いた点です。 これは、gmap を別の関数からも参照しているため、グローバルな変数として宣言しました。

また、情報ウインドウの生成とクリックイベント関数の登録処理をひとつの関数として独立させてあります。 これは、この関数の中で生成される情報ウインドウのインスタンスがそれぞれのマーカー毎に別々のものになる様にしています。

このソースを作成する前に失敗したものがありますので、以下の例をご覧ください。 各マーカーは表示されますが、クリックしても5番目のマーカーのところにしか情報ウインドウは表示されません。

クリックイベントの関数のinfoWindowはforループ内の変数であるため、同じ変数が割り当てられて クリックイベント時にはforループ処理の最後の5番目のマーカーの情報ウインドウが残ったまま になっています。それで、どのマーカーをクリックしても情報ウインドウには「marker-5」としか表示されません。

 

■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)


トラックバック

このページのトラックバックURL:
http://app.mitelog.jp/t/trackback/459161/26536494

「GoogleMap API V3」 の使い方その5(続イベント)を参照しているブログ:

コメント

同じ壁にぶつかりました。無事解決、ありがとうございます。

お役に立ててなによりです。

コメントを投稿