Google Maps で複数マーカーを取り扱う – リスナーの追加

Google Mapで複数マーカーを取り扱う際のTips。

• 複数のマーカーに対するリスナー追加

マーカーの作成・表示は1つの場合と同じだが、リスナーの書き方には若干注意が必要。つまり、ループを回してクロージャによりリスナーを定義すると、変数のスコープが問題になってくる。
次の例では複数のマーカーを生成し、クリックされたときにおのおの異なる情報ウィンドウを表示しようとしている。

for (var i = 0; i < gGpsData.length; i++) {
    var cGpsData = gGpsData[i];
    var pos = new google.maps.LatLng(cGpsData.lat, cGpsData.lon);
    var marker = new google.maps.Marker();
    // 途中省略
    google.maps.event.addListener(marker, 'click', function(event){
        var infoWindow = new google.maps.InfoWindow({
            content: cGpsData.toString()
        })
        infoWindow.open(gMap,marker);
    });
}

この例では、変数markerがリスナー定義の中でも有効なため、クリックして開く情報ウィンドウがが最後のマーカーに紐付けられてしまう。(contentも全て同じになる。)
したがって、以下のように、リスナー定義の部分を外に出して別関数にすることで、意図どおりの動作が実現できる。

for (var i = 0; i < gGpsData.length; i++) {
    var cGpsData = gGpsData[i];
    var pos = new google.maps.LatLng(cGpsData.lat, cGpsData.lon);
    var marker = new google.maps.Marker();
    // 途中省略
    addListenerPoint(marker,cGpsData.toString());
}

function addListenerPoint(m_marker,m_content){
    google.maps.event.addListener(m_marker, 'click', function(event){
        var infoWindow = new google.maps.InfoWindow({
            content: m_content
        })
        infoWindow.open(gMap, m_marker);
    });
}