Google map js api version 3 polygon infowindow on wrong position

Question

I have this block of code inside a loop:

      var points = [new google.maps.LatLng(lat1, lon1),
          new google.maps.LatLng(lat2, lon1),
          new google.maps.LatLng(lat2, lon2),
          new google.maps.LatLng(lat1, lon2),
          new google.maps.LatLng(lat1, lon1)
          ];
      bounds.extend(new google.maps.LatLng(lat1, lon1));
      bounds.extend(new google.maps.LatLng(lat2, lon1));
      bounds.extend(new google.maps.LatLng(lat2, lon2));
      bounds.extend(new google.maps.LatLng(lat1, lon2));
      var polygon = new google.maps.Polygon({
                        paths: points,
                        strokeColor: "#f33f00",
                        strokeOpacity: 1,
                        strokeWeight: 1,
                        fillColor: "#ff0000",
                        fillOpacity: 0.2
                    });

    var x1 = Math.min(lon1,lon2);
    var y1 = Math.min(lat1,lat2);
    var x2 = Math.max(lon1,lon2);
    var y2 = Math.max(lat1,lat2);
    var x = x1 + ((x2 - x1) / 2);
    var y = y1 + ((y2 - y1) / 2);
    var cp = new google.maps.LatLng(y,x);
    var infoWindow = new google.maps.InfoWindow();
                    infoWindow.setPosition(cp);
                    infoWindow.setContent(html);

   google.maps.event.addListener(polygon, "click", function() {
                        infoWindow.open(map);
                    });

                    polygon.setMap(map);

My problem is when I click each of the polygons, the infowindow opens on the same position for all the polygons.

Any help will be greatly appreciated!

score 1 · Answer 1 · answered Jun 20 '12 at 10:54

1

You are overwriting the infoWindow-object on every loop.

Store the properties related to the infoWindow(cp,html) inside the polygon-objects and call setPosition() and setContent() inside the click-function by using the stored properties.

answered Jun 20 '12 at 10:54

Dr.Molle

116,463
16
195
201

Hi! Thank you! I tried doing these too: ` var infoWindow = new google.maps.InfoWindow({content: html, position: cp}); AND var infoWindow = new google.maps.InfoWindow(); google.maps.event.addListener(polygon, "click", function() { infoWindow.setPosition(cp); infoWindow.setContent(html); infoWindow.open(map); }); polygon.setMap(map); ` But they didn't seem to work. – cristy Jun 21 '12 at 02:33

score 0 · Accepted Answer · answered Jun 21 '12 at 02:44

What I did was, set the map globally, replace the block of code with a call to a function outside the loop that does the same work, like this:

function createPolygon(lat1, lon1, lat2, lon2, html)
{
     var points = [new google.maps.LatLng(lat1, lon1),
      new google.maps.LatLng(lat2, lon1),
      new google.maps.LatLng(lat2, lon2),
      new google.maps.LatLng(lat1, lon2),
      new google.maps.LatLng(lat1, lon1)
      ];
  bounds.extend(new google.maps.LatLng(lat1, lon1));
  bounds.extend(new google.maps.LatLng(lat2, lon1));
  bounds.extend(new google.maps.LatLng(lat2, lon2));
  bounds.extend(new google.maps.LatLng(lat1, lon2));
  var polygon = new google.maps.Polygon({
                    paths: points,
                    strokeColor: "#f33f00",
                    strokeOpacity: 1,
                    strokeWeight: 1,
                    fillColor: "#ff0000",
                    fillOpacity: 0.2
                });

var x1 = Math.min(lon1,lon2);
var y1 = Math.min(lat1,lat2);
var x2 = Math.max(lon1,lon2);
var y2 = Math.max(lat1,lat2);
var x = x1 + ((x2 - x1) / 2);
var y = y1 + ((y2 - y1) / 2);
var cp = new google.maps.LatLng(y,x);
var infoWindow = new google.maps.InfoWindow();
                infoWindow.setPosition(cp);
                infoWindow.setContent(html);

 google.maps.event.addListener(polygon, "click", function() {
                    infoWindow.open(map);
                });

                polygon.setMap(map);
}

a Polygon can have more than 4 sides, then how one can get the center of this in order to put the infowindow there? — chespinoza, Jan 25 '13 at 15:12
The answer is here: http://stackoverflow.com/questions/3081021/how-to-get-the-center-of-a-polygon-in-google-maps-v3 by furiozo — chespinoza, Jan 25 '13 at 15:36

Google map js api version 3 polygon infowindow on wrong position

2 Answers2