Google-map , Only the last infoWindow is added

Question

I have an issue to add infoWindow to my markers generated by a FOR loop. I want to generate a infoWindow to each marker. I see only the last infoWindow is added, even if I clic to other marker, this infoWindow is shown in the last marker see screenshot

Here is my loop to create markers and infowindows :

  for (var i in data) {

            var rssi = data[i].rssi;

            var marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(data[i].lat, data[i].lng),
                title: data[i].rssi,
                clickable: true
            });

                marker.info = new google.maps.InfoWindow({
                content: 'This is the marker:'+i
            });

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

            markers.push(marker);

        }

possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Nov 10 '15 at 14:05

score 0 · Answer 1 · answered Nov 10 '15 at 11:35

I think you should open infoWindow on given index, otherwise it's always referenced to the last loop item. So in click event you should open infoWIndow in a given i

google.maps.event.addListener(marker, 'click', function() {
    marker.info.open(map, marker[i]);
});

I guess if you click in a different marker then you will have a two open infoWindow. If you want to always keep a one open you can store currentOpen index and close it before open a new one.

score 0 · Answer 2 · answered Nov 10 '15 at 11:47

0

In fact the problem was in

marker.info.open(map, marker);

Thet should be

marker.info.open(map, this);

answered Nov 10 '15 at 11:47

karim sallami

55
1
8

score 0 · Accepted Answer · answered Nov 10 '15 at 11:49

you need to find the current marker then get the info object from it.try this:

use:

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

  
  <script src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=false"></script>
<script>
var markers=[];
function plotmap(){
    var gm = google.maps;
    var map = new gm.Map(document.getElementById('map_canvas'), {
      mapTypeId: gm.MapTypeId.SATELLITE,
      center: new gm.LatLng(17.00,78.43), zoom: 10
    });
    
var data=[{'rssi':"fgfghfgh",'lat':"17.43",'lng':"78.43"},{'rssi':"new one",'lat':"17.49",'lng':"78.53"}];



for (var i in data) {
    var rssi = data[i].rssi;

    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(data[i].lat, data[i].lng),
        title: data[i].rssi,
        clickable: true
    });

       marker.info = new google.maps.InfoWindow({
        content: 'This is the marker:'+i
    });

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

    markers.push(marker);

}
}

</script>

<div id="map_canvas" style="width:600px;height:500px;"></div>

<script>
plotmap();
</script>

Google-map , Only the last infoWindow is added

3 Answers3