Google maps .fitBounds() and custom offsetCenter?

Question

I was using this function, which given a latlong, it centers the google maps considering the offsetX and offsetY:

customCenter: function ( latlng, offsetx, offsety ) {
    // latlng is the apparent centre-point
    // offsetx is the distance you want that point to move to the right, in pixels
    // offsety is the distance you want that point to move upwards, in pixels
    var self = this;

    var scale = Math.pow(2, self.map.getZoom());
    google.maps.event.addListenerOnce(self.map,"projection_changed", function() {
        var worldCoordinateCenter = self.map.getProjection().fromLatLngToPoint(latlng);
    var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0)

    var worldCoordinateNewCenter = new google.maps.Point(
        worldCoordinateCenter.x - pixelOffset.x,
        worldCoordinateCenter.y + pixelOffset.y
    );

    var newCenter = self.map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);
        self.map.setCenter(newCenter);
    });
}

Which I'm using like, so:

self.customCenter (marker.position, $('aside').width(), 0 );

But now they'are asking me to fitbounds with the offset ( so none of the Markers are out of the view

(usually used like so:)

var bounds = new google.maps.LatLngBounds();
bounds.extend(myPlace);
bounds.extend(Item_1);
bounds.extend(Item_2);
bounds.extend(Item_3);
self.map.fitBounds(bounds);

But I don't see a way to combine this two functionalities

( this is because I have an aside floating ( pos: absolute ) over the google maps, just like this image I found online:

)

Any ideas?

-I'm trying like this now:

customCenterWithBounds: function ( offsetx, offsety ) {
    // offsetx is the distance you want that point to move to the right, in pixels
    // offsety is the distance you want that point to move upwards, in pixels
    var self = this;

    self.map.fitBounds(self.bounds);

    var mapCenter = self.map.getCenter();
    var latlng = new google.maps.LatLng (mapCenter.lat(), mapCenter.lng() );

    var scale = Math.pow(2, self.map.getZoom());
    google.maps.event.addListenerOnce(self.map,"projection_changed", function() {
        var worldCoordinateCenter = self.map.getProjection().fromLatLngToPoint(latlng);
    var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0)

    var worldCoordinateNewCenter = new google.maps.Point(
        worldCoordinateCenter.x - pixelOffset.x,
        worldCoordinateCenter.y + pixelOffset.y
    );

    var newCenter = self.map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);
        self.map.setCenter(newCenter);
    });
}

But the map would be over-zoomed.. and not even in the center of the visible area..

Have you checked out this SO question? https://developers.google.com/maps/documentation/javascript/reference#Map I don't like the highest answer, but the ones below it might be able to help you out: `fitBoundsWithPadding`. — shotor, Jul 06 '17 at 14:10
Thanks for the suggestion, but are you sure it's the right link? I see a documentation page — Toni Michel Caubet, Jul 06 '17 at 14:15
woops, sorry about that: https://stackoverflow.com/questions/10339365/google-maps-api-3-fitbounds-padding-ensure-markers-are-not-obscured-by-overlai — shotor, Jul 06 '17 at 14:20
I'm trying like this, but its not working for me.. I'm adding the code into the question in case that you see something i don't — Toni Michel Caubet, Jul 06 '17 at 15:16
I've seen a solution to this somewhere on SO, into the depths we dive! — , Jul 06 '17 at 16:03
Possible duplicate of [How to offset the center point in Google maps api V3](https://stackoverflow.com/questions/10656743/how-to-offset-the-center-point-in-google-maps-api-v3) — , Jul 06 '17 at 16:14

score 1 · Accepted Answer · answered Jul 20 '17 at 08:48

I ended up doing this

customCenter: function (offsetx, offsety, bounds_obj ) {
    if ($(window).width() <= 1200 ) {
        offsetx = 0;
    }
    var self = this;

    google.maps.event.addListenerOnce(self.map,"projection_changed", function() {
        var latlng;
        var fbObj = self.map.fitBounds(self.bounds);
        var mapCenter = self.map.getCenter();

        latlng = new google.maps.LatLng(mapCenter.lat(), mapCenter.lng());

        var scale = Math.pow(2, self.map.getZoom());

        var worldCoordinateCenter = self.map.getProjection().fromLatLngToPoint(latlng);
        var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0)

        var worldCoordinateNewCenter = new google.maps.Point(
            worldCoordinateCenter.x - pixelOffset.x,
            worldCoordinateCenter.y + pixelOffset.y
        );

        var newCenter = self.map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);
        self.map.setCenter(newCenter);
    });
}

Google maps .fitBounds() and custom offsetCenter?

1 Answers1