How to create multiple infowindow in google map api

Question

I create 3 markers in the map whose data comes from a json. but when I click on a marker and try to open the Info window only the last marker will response correctly.. please help me.... this the code.... ```

Accepted Answer

The problem is if you try and assign content to the infowindow within a loop. Then when you click the marker, it only knows about the content from the very last iteration of the loop. You need a closure instead. There's a couple of different ways to handle this, here's how I usually do it:

```
function initialize() {
    var mapProp = {
        center:myCenter,
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var infowindow =  new google.maps.InfoWindow({
        content: ""
    });

for (var i = 0, length = json.length; i < length; i++) {
        var data=json[i];
        var latLng = new google.maps.LatLng(data.lat, data.lng); 
        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: data.title
        });

bindInfoWindow(marker, map, infowindow, data.description);
    } 
}

function bindInfoWindow(marker, map, infowindow, description) {
    marker.addListener('click', function() {
        infowindow.setContent(description);
        infowindow.open(map, this);
    });
}
```

How to create multiple infowindow in google map api

Solution

Problem