How to center polygon in google maps javascript v3?

Question

I have a google map with polygon array from JSON. I need to center the polygon after the loading of map. I am having trouble to this part. Pls. someone to help me.

THIS IS MY SAMPLE JSON

[{"ZoneID":7,"Name":"Testing Site Zone","Type":"Home","TypeID":0,"Perimeter":"25.774252,-80.190262 18.466465,-66.11829 32.321384,-64.75737","CellIds":"","Location":"","Company":"Company Co. Ltd.","CompanyID":0,"Color":"#598527","Image":null,"ImageFill":null,"Tag":null,"TagID":null,"CreatedDate":"2015-05-04T08:24:25.297345","LastModified":"2015-05-04T08:24:25.297345","Created_UserID":0,"Modified_UserID":0,"Created_User":"","Modified_User":"","ErrorMessage":null}]

THIS IS TO LOAD JAVASCRIPT

var geocoder;
var perimeter = obj.Perimeter;
var name = obj.Name;
var type = obj.Type;
var company = obj.Company;
var address = obj.Location;
var color = obj.Color;
var map;
var polygon;
var pathCoordinates = new google.maps.MVCArray();

function initialize() {
    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(13.7500, 100.4833),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        zoomControl: true
    });
    var parsePerimeter = perimeter.replace(/\),/g, "");
    var coords = parsePerimeter.split(" ");
    var recoords;
    for (var k = 0; k < coords.length; k++) {
        recoords = coords[k].split(",");
        pathCoordinates.push(new google.maps.LatLng(parseFloat(recoords[0]), parseFloat(recoords[1])));
    }
    polygon = new google.maps.Polygon({
        path: pathCoordinates,
        strokeColor: color,
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: color,
        fillOpacity: 0.35,
        Company: company,
        Name: name,
        Address: address,
        map: map
    });
    pathCoordinates = [];
    polygon.setMap(map);
    // Add a listener for the click event.
    google.maps.event.addListener(polygon, 'click', showArrays);
    infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(polygon, 'click', (function (polygon, k) {
        return function () {
            map.panTo(this.position);
        }
    })(polygon, k));
}

Answer 1

Since the Polygon has no getBounds or getCenter method, you have to do it by yourself.

The key here is to create a LatLngBounds object and to extend it with each Polygon point. Then you can use this object with the map fitBounds method.

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);

JSFiddle demo