finding polygon center google map api 3

Question

I want to find the center of a polygon in google map, I tried several solutions however none of them worked correctly for right triangle polygon here is example code:

var path = new Array(new google.maps.LatLng(1, 1), new google.maps.LatLng(1, 10), new google.maps.LatLng(10, 10), new google.maps.LatLng(1, 1));

var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(40, 9),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

var polygon = new google.maps.Polygon({
    path: path,
    map: map
});

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

for (var i=0; i<polygon.getPath().length; i++) {

    var point = new google.maps.LatLng(path[i].lat(), path[i].lng());
    bounds.extend(point);
}

map.fitBounds(bounds);
    const marker = new google.maps.Marker({
  position: {
    lat: bounds.getCenter().lat(),
    lng: bounds.getCenter().lng()
  },
  map: this.map,
  title: "Hello World!"
});
marker.setMap(map);

I used google.maps.LatLngBounds(); for finding cneter of the triangle and mark the center in the map however the result center is not actually true center of the triangle, jsfiddle example of this code.
I used another solution which is discussed here for finding the center of the polygon but that won't work either so is there any other solution for finding an accurate center of polygons regardless of polygon type?

if you see jsfiddle example you can see that marker isn't exactly in the center of the triangle.I mean bounds.center() is not the center point of the triangle — Daniel.V, Oct 17 '18 at 11:35
So you want the [centroid of the polygon](https://en.wikipedia.org/wiki/Centroid), not the center of the bounds. — geocodezip, Oct 17 '18 at 12:15

score 1 · Answer 1 · answered Oct 17 '18 at 09:09

1

points is array of polygon points,call getCenter to get coordinates of center.

var points = [[1,1],[1,10],[10,10]];
function getCenter(){
    var sumX = 0, sumY = 0;
    for(var i = 0; i < points.length; i++){
        var point = points[i];
        var x = point[0];
        var y = point[1];
        sumX += x;
        sumY += y;
    }
    return {x:sumX / points.length,y:sumY / points.length};
}

var centerOfPoints = getCenter();

answered Oct 17 '18 at 09:09

mohammad feiz

308
3
4

Thanks. I am working with Angular Google maps and using dataLayer component. – Muhammad Hamed K Aug 22 '22 at 17:00

score 0 · Answer 2 · answered Aug 27 '23 at 10:32

To get the center of a Polygon, rather than an average of all the points try this

/**
 * Calculates the center point of a polygon.
 *
 * @param {google.maps.Polygon} polygon - The polygon object.
 * @returns {google.maps.LatLng} - The center point of the polygon.
 */
function getPolygonCenter(polygon) {
  const path = polygon.getPath();
  let latSum = 0;
  let lngSum = 0;

  path.forEach(function (point) {
    latSum += point.lat();
    lngSum += point.lng();
  });

  const centerLat = latSum / path.getLength();
  const centerLng = lngSum / path.getLength();

  return new google.maps.LatLng(centerLat, centerLng);
}

This is more robust for mercator distortions as it uses Google wizardry instead.

finding polygon center google map api 3

2 Answers2