Google map close info別のマーカーがクリックされたときのウィンドウ

Question

私のことに関連する質問がたくさんあることは知っています。しかし、私はそれらのほとんどすべてを見て、それらのいくつかを適用しようとしました。しかし、何も起こりません。以下は私のコードは

var locations = 
     [{ "id": 1, "ReferenceNumber": "52525252525", "Address" : "School" , "Latitude": "21.585486", "Longitude": "50.258745" }, 
     { "id": 2, "ReferenceNumber": "6262626262", "Address" : "University", "Latitude": "21.54484411", "Longitude": "50.14846648" }, 
     { "id": 3, "ReferenceNumber": "424242424", "Address": "PUMPING STATION ", "Latitude": "21.9856341", "Longitude": "61.2587466" }]; 

である私が追加した上記の場所は、そうでない場合、私はすべてのヘルプは高く評価されるだろう150の以上の拠点

$.each(locations, function(i, item) { 

    var marker = new google.maps.Marker({ 
     'position': new google.maps.LatLng(item.Latitude, item.Longitude), 
     'map': map, 
     'title': item.Latitude + "," + item.Longitude 
    }); 

    marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png') 

    var infowindow = new google.maps.InfoWindow({ 
     content: "<div class='infoDiv'><h3>Reference#: </h3> <h6>" + item.ReferenceNumber + "<h3>Location: </h3> <h6>" + item.Address + "</div></div>" 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map, marker); 
    }); 

    google.maps.event.addListener(map, "click", function(event) { 
     infowindow.close(); 
     //autoCenter(); 
    }); 
}) 

を持って、偽のエントリを持つほんの一部です。

Answer 1

ループ内にインフォウィンドウを作成しないでください。クリックするマーカーに応じて、オブジェクトを1つだけ必要とし、その内容を設定します。

また、マーカークリックリスナーの周りにクロージャを使用する必要があります。それは次のようなものです。

google.maps.event.addListener(marker, 'click', (function(marker) { 

    return function() { 

    // Something here 
    } 

})(marker)); 

以下の使用例。

function initialize() { 
 

 
    var mapOptions = { 
 
    zoom: 5, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    center: new google.maps.LatLng(1, 1) 
 
    }; 
 

 
    var locations = [ 
 
    [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'], 
 
    [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'], 
 
    [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'], 
 
    [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'], 
 
    [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'], 
 
    [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6'] 
 
    ]; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    $.each(locations, function(i, item) { 
 

 
    var marker = new google.maps.Marker({ 
 
     position: item[0], 
 
     map: map, 
 
     title: item[1], 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker) { 
 

 
     return function() { 
 
     infowindow.setContent(item[2]); 
 
     infowindow.open(map, marker); 
 
     } 
 

 
    })(marker)); 
 
    }); 
 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas { 
 
    height: 150px; 
 
}

<div id="map-canvas"></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>