The ascent of the window in the loop does not work correctly, when hovering over the polygon in google maps. Data pulls with json. Here is a piece of code ...

for (var i = 0; i < data.length; i++ ) { // Init polygons var polygonGroup = new google.maps.Polygon({ paths: data[i].polygon, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35 }); polygonGroup.setMap(_map); // Init polygons windows information var polygonInfo = new google.maps.InfoWindow({ content: data[i].polygonInfo }); // Hover polygons polygonGroup.addListener( 'mouseover', function(){ this.setOptions({fillColor: '#00FF00'}); polygonInfo.setPosition(polygonCenter(this)); polygonInfo.open(_map); }); polygonGroup.addListener( 'mouseout', function(){ this.setOptions({fillColor: '#FF0000'}); polygonInfo.close(); }); }

data = [{"polygon": [array], "polygonInfo": "string"}, {"polygon": [array], "polygonInfo": "string"}]

The problem is that the same window pops up for both polygons, which is the last. That is, data [1] .polygonInfo. Tell me please, what is my problem?

    1 answer 1

    It's all about the scope of javascript variables (scope). To solve this problem, you need to use a closure .