Multiple infoWindow in Google Map API

Question

I'm trying to create multiple infowindow for multiple marker, But it seem like just refer to last infowindow

This is my code (in for loop, _lat and _long is unique value):

                        marker.addListener('click', function(){
                            //markerInfoWindow.close();
                            markerInfoWindow.setContent('<a href="#" onclick="onUnsavePlace(' + _lat + ',' + _long + ');">Unsave place</a>', true);
                            markerInfoWindow.open(map, this); 
                        }); 

                        marker.setMap(map);

I tested with marker, marker show correctly but all of them link to the last infoWindow.

How can I make new infoWindow for each Marker?

Update:

This is fully my function after update:

        function getListPosition(listMarkers, map){
            db.transaction(function(tx){
                tx.executeSql('SELECT * FROM Position', [], function(tx, rs) {
                    var numberOfItems = rs.rows.length; 

                    var markerInfoWindow = new google.maps.InfoWindow();
                    var marker;

                    for (var i = 0; i < numberOfItems; i++) {

                        var _lat = rs.rows.item(i).Lat;
                        var _long = rs.rows.item(i).Long;

                        marker = new google.maps.Marker({
                            position: {lat: _lat , lng: _long}
                        });

                        listMarkers.push(marker);

                        google.maps.event.addListener(marker, 'click', (function(marker) {
                            return function() {
                                markerInfoWindow.setContent('<a href="#" onclick="onUnsavePlace(' + _lat + ',' + _long + ');">Unsave place</a>', true);
                                markerInfoWindow.open(map, marker);
                            }
                        })(marker));

                        // marker.addListener('click', function(){
                        //     //markerInfoWindow.close();
                        //     markerInfoWindow.setContent('<a href="#" onclick="onUnsavePlace(' + _lat + ',' + _long + ');">Unsave place</a>', true);
                        //     markerInfoWindow.open(map, this); 
                        // }); 

                        marker.setMap(map); 

                        // Set map center to the last marker
                        if (i == numberOfItems - 1){
                            map.setCenter({lat: _lat, lng: _long});
                        } 

                    }

                });
            }, function(err){
                console.log('Error when get list position. Error code: ' + err.code);
            });
        }

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, Jan 14 '16 at 16:45
You need function closure on `_lat` and `_lng` as well as marker (or get them from the marker). Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue if that doesn't help. — geocodezip, Jan 14 '16 at 16:58
Can you explain me abit about this syntax: `(function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)` — Trần Minh Phương, Jan 14 '16 at 17:28

score 0 · Accepted Answer · answered Jan 14 '16 at 17:35

0

You need function closure on the loop variables that are needed when the click listener function runs. In your case _lat and _lng. It would probably be simplest to just get those from the marker (this) though:

google.maps.event.addListener(marker, 'click', function(evt) {
  markerInfoWindow.setContent('<a href="#" onclick="onUnsavePlace(' + this.getPosition().lat() + ',' + this.getPosition().lng() + ');">Unsave place</a>', true);
  markerInfoWindow.open(map, this);
});

(not tested)

answered Jan 14 '16 at 17:35

geocodezip

158,664
13
220
245

Oh, It works. But why it doesn't work with this: `marker.addListener('click', function(){ //markerInfoWindow.close(); markerInfoWindow.setContent('Unsave place', true); markerInfoWindow.open(map, this); });` – Trần Minh Phương Jan 14 '16 at 17:55
Because as I said in my answer and my comment, you don't have function closure on `_lat` and `_long`. – geocodezip Jan 14 '16 at 17:58
My mistake! Thank you! – Trần Minh Phương Jan 14 '16 at 17:58

Multiple infoWindow in Google Map API

1 Answers1