Google map infowindow position

Question

Here is a sample google map with three polygons. I am setting the infowindow for each polygon as,

 for (var i in coordinates) {
           arr = [];

   for (var j=0; j < coordinates[i].length; j++) {
              arr.push( new google.maps.LatLng(
                    parseFloat(coordinates[i][j][0]),
                    parseFloat(coordinates[i][j][1])
              ));

              bounds.extend(arr[arr.length-1])
            }

  // Construct the polygon.
  polygons.push(new google.maps.Polygon({
                paths: arr,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            }));
            polygons[polygons.length-1].setMap(map);      

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

google.maps.event.addListener(polygons[polygons.length-1], 'click', function(event) {
  infowindow.open(map);
  infoWindow.setPosition(event.latLng);
  });     

}

But the infowindow is showing at the top left position. How can I set it on the center of clicked polygon?

Answer 1

Two issues:

1. There is a typo in your click listener code, javascript is case sensitive, infowindow and infoWindow are different objects, so you are not setting the position of the infowindow correctly.

    infowindow.open(map);
    infoWindow.setPosition(event.latLng);
   

2. You are currently placing the infowindow at the place that is clicked infoWindow.setPosition(event.latLng);.

If you want the infowindow in the center of the bounds of the polygon, you need to place it there:

updated fiddle

code snippet:

var map, infoWindow;
var infoWindow = new google.maps.InfoWindow({
  content: "Hello World!"
});

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bounds = new google.maps.LatLngBounds();
  var polygons = [];
  var arr = new Array();
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  for (var i in coordinates) {
    arr = [];
    var polyBounds = new google.maps.LatLngBounds();
    for (var j = 0; j < coordinates[i].length; j++) {
      arr.push(new google.maps.LatLng(
        parseFloat(coordinates[i][j][0]),
        parseFloat(coordinates[i][j][1])));

      bounds.extend(arr[arr.length - 1]);
      polyBounds.extend(arr[arr.length - 1]);
    }
    var IWpoint = polyBounds.getCenter();
    // Construct the polygon.
    polygons.push(new google.maps.Polygon({
      paths: arr,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      IWpoint: IWpoint
    }));
    polygons[polygons.length - 1].setMap(map);
    var centerMark = new google.maps.Marker({
      map: map,
      position: IWpoint,
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        anchor: new google.maps.Point(3.5, 3.5),
        size: new google.maps.Size(7, 7)
      },
      title: "polygon " + i
    });
    google.maps.event.addListener(polygons[polygons.length - 1], 'click', function(event) {
      infoWindow.setPosition(this.IWpoint);
      infoWindow.open(map);
    });

  }
  map.fitBounds(bounds);

}
google.maps.event.addDomListener(window, 'load', initialize);
// Define the LatLng coordinates for the polygon's path.
var coordinates = {
  "feed1": [
    [25.774252, -80.190262],
    [18.466465, -66.118292],
    [32.321384, -64.75737],
    [25.774252, -80.190262]
  ],

  "feed2": [
    [26.774252, -81.190262],
    [19.466465, -67.118292],
    [33.321384, -65.75737],
    [26.774252, -81.190262]
  ],

  "feed3": [
    [27.774252, -82.190262],
    [20.466465, -68.118292],
    [34.321384, -66.75737],
    [27.774252, -82.190262]
  ]
};

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

If you want to place it at the polygons "centroid", you need to compute that and place it there:

// from http://stackoverflow.com/questions/9692448/how-can-you-find-the-centroid-of-a-concave-irregular-polygon-in-javascript
function get_polygon_centroid(pts) {
   var first = pts[0], last = pts[pts.length-1];
   if (first.lat() != last.lat() || first.lng() != last.lng()) pts.push(first);
   var twicearea=0,
   x=0, y=0,
   nPts = pts.length,
   p1, p2, f;
   for ( var i=0, j=nPts-1 ; i<nPts ; j=i++ ) {
      p1 = pts[i]; p2 = pts[j];
      f = p1.lat()*p2.lng() - p2.lat()*p1.lng();
      twicearea += f;          
      x += ( p1.lng() + p2.lng() ) * f;
      y += ( p1.lat() + p2.lat() ) * f;
   }
   f = twicearea * 3;
   return new google.maps.LatLng(y/f, x/f);
}

jsfiddle