How to get the center of a polygon in google maps

Question

It doesn't need to be 100% correct, it can be the center of the bounding rectangle.

Answer 1

Matthew's answer is a good solution. However, when using the Google Maps API v3, you might want to pass each point of the polygon to a LatLngBounds object through the extend() method, and then finally call the getCenter() method on the LatLngBounds object. Consider the following example:

var bounds = new google.maps.LatLngBounds();
var i;

// The Bermuda Triangle
var polygonCoords = [
  new google.maps.LatLng(25.774252, -80.190262),
  new google.maps.LatLng(18.466465, -66.118292),
  new google.maps.LatLng(32.321384, -64.757370),
  new google.maps.LatLng(25.774252, -80.190262)
];

for (i = 0; i < polygonCoords.length; i++) {
  bounds.extend(polygonCoords[i]);
}

// The Center of the Bermuda Triangle - (25.3939245, -72.473816)
console.log(bounds.getCenter());

Answer 2

Note that in the case of a concave polygon the center of the bounding rectangle might be completely outside the polygon. If your polygons might be concaved, I'd recommend using the center of the biggest inscribed circle as the "center" of the polygon. You can see a simple enough algorithm here (p. 4). If your task is to place a label on the polygon, this will also give the most aesthetically pleasing results (in which case I'd recommend using this method even if your polygons might not be concave).

Answer 3

Here is a custom function I wrote. Feel free to use it.

function polygonCenter(poly) {
    var latitudes = [];
    var longitudes = [];
    var vertices = poly.getPath();

    // put all latitudes and longitudes in arrays
    for (var i = 0; i < vertices.length; i++) {
        longitudes.push(vertices.getAt(i).lng());
        latitudes.push(vertices.getAt(i).lat());
    }

    // sort the arrays low to high
    latitudes.sort();
    longitudes.sort();

    // get the min and max of each
    var lowX = latitudes[0];
    var highX = latitudes[latitudes.length - 1];
    var lowy = longitudes[0];
    var highy = longitudes[latitudes.length - 1];

    // center of the polygon is the starting point plus the midpoint
    var centerX = lowX + ((highX - lowX) / 2);
    var centerY = lowy + ((highy - lowy) / 2);

    return (new google.maps.LatLng(centerX, centerY));
}

Answer 4

you can extend the Polygon class with your own version of the missing function, let's call it my_getBounds() :

google.maps.Polygon.prototype.my_getBounds=function(){
    var bounds = new google.maps.LatLngBounds()
    this.getPath().forEach(function(element,index){bounds.extend(element)})
    return bounds
}

and than use it in code like this :

myPolygon.my_getBounds().getCenter()

... etc, it should be equivalent to the v2 behavior

Answer 5

Algorithm:

Run through all the points in the polygon. For all the points find;

• x1, the lowest x coordinate
• y1, the lowest y coordinate
• x2, the highest x coordinate
• y2, the highest y coordinate

You now have the bounding rectangle, and can work out the center using:

center.x = x1 + ((x2 - x1) / 2);
center.y = y1 + ((y2 - y1) / 2);