Google maps fitBounds with padding?

Question

We want something like this leaflet fitBounds in our google maps application. We saw a few examples but it doesn't worked as expected. We tried to make the div as a google maps controller, extend the bounds manually but nothing from that worked...

function zoomToBounds(polygon){
bounds = new google.maps.LatLngBounds();
$.each(polygon, function( key, latLng ) {
    bounds.extend(new google.maps.LatLng(latLng.lat, latLng.lng));
});    

/////////////////////////////////////////////////////////////
// We saw a solution like this, but the zooming is a problem
//
// Extend bounds with a fake point:
/////////////////////////////////////////////////////////////
/*
if (this.map.getProjection()) {
    proj = this.map.getProjection();
    latlng = bounds.getSouthWest();
    swPoint = proj.fromLatLngToPoint(latlng);
    latlng2 = proj.fromPointToLatLng({
      x: swPoint.x - 10,
      y: swPoint.y
    });
    bounds.extend(latlng2);
}*/

this.map.fitBounds(bounds);
}

possibly relevant question: [How to offset the center of a Google maps (API v3) in pixels?](http://stackoverflow.com/questions/3473367/how-to-offset-the-center-of-a-google-maps-api-v3-in-pixels) — geocodezip, Jan 27 '15 at 16:00
possibly relevant question: [How to offset the center point in Google maps api V3](http://stackoverflow.com/questions/10656743/how-to-offset-the-center-point-in-google-maps-api-v3) — geocodezip, Jan 27 '15 at 16:01
@geocodezip thanks I made it with your help [jsfiddle](http://jsfiddle.net/g7br74a4/48/) — erzzo, Jan 28 '15 at 10:19

score 1 · Answer 1 · answered Jan 28 '15 at 14:20

After a while I found a solution that works.

if (this.map.getProjection()) {
    var offsetx = 200;
    var offsety = 0;

    var point1 = this.map.getProjection().fromLatLngToPoint(bounds.getSouthWest());
    this.map.fitBounds(bounds);

    var point2 = new google.maps.Point(
        ( (typeof(offsetx) == 'number' ? offsetx : 0) / Math.pow(2, this.map.getZoom()) ) || 0,
        ( (typeof(offsety) == 'number' ? offsety : 0) / Math.pow(2, this.map.getZoom()) ) || 0
    );          

    var newPoint = this.map.getProjection().fromPointToLatLng(new google.maps.Point(
        point1.x - point2.x,
        point1.y + point2.y
    ));

    bounds.extend(newPoint);
    this.map.fitBounds(bounds);
}

jsfiddle

Google maps fitBounds with padding?

1 Answers1

Linked