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..

Answer 1

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