15
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Google Maps APIでマーカをクリックしたときに、個別の内容のInfoWindowを表示したい。

Last updated at Posted at 2014-06-10

クロージャを利用する事で目的の動作を行えるみたい。

まずクロージャが何者かを知る必要があり、以下のサイトがすごいわかりやすかった。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Closures

Googleのドキュメントを読み解く。

Googleのデベロッパーサイトに、ソースコード付きで記載があった。これも、読んでいてすごいわかりやすかった。
https://developers.google.com/maps/documentation/javascript/events?hl=ja#EventClosures

せっかくなので

自作のサンプルコード(抜粋 & 簡略版)をあげておく。

function plotMarker(markers){
    for(var idx=0; idx < marker.length; idx++){
        marker.setMap(map);
        onMarkerClick(marker, idx);
    }
}

function onMarkerClick(marker, idx){
    google.maps.event.addListener(
        marker
    ,   'click'
    ,   function(event){
            alert(idx);
        }
    );
}

これで10個マーカがあった場合、それぞれのマーカに対応するインデックス番号がアラート表示される。

15
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?