Start by obtaining the coordinates of the polygon's center and utilize it as the label coordinates value. I acquired the polygon's center following guidance from a solution in this Stack Overflow post and utilized those coordinates for the ll parameter in the labelOverlay.
Here's the breakdown:
Initially, note that you created the labelOverlay before the polygon. To determine the polygon's center, rearrange the order so the polygon precedes the labelOverlay.
Next, incorporate the code snippet from the Stack Overflow post to pass each polygon point to a LatLngBounds object using the extend() method.
Calculate the bounds' center and assign it as the ll value in your labelOverlay.
The provided code snippet demonstrates how the implementation should appear. A functional example can be viewed in this live fiddle.
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < triangleCoords.length; i++) {
bounds.extend(triangleCoords[i]);
}
var polygonCenter = bounds.getCenter();
var overlay1 = new LabelOverlay({
ll : polygonCenter,
//minBox : box,
minBoxH : 0.346,
minBoxW : 1.121,
maxBoxH : 0.09,
maxBoxW : 0.3,
//className : 'small',
debugBoxes : true,
debugVisibility : true,
maxZoom : 10,
minZoom : 6,
label : "Hello world",
map : map
});