michahell
5/15/2015 - 11:44 AM

google maps set and get center with offset

google maps set and get center with offset

google.maps.Map.prototype.setCenterWithOffset= function(latlng, offsetX, offsetY) {
    var map = this;
    var ov = new google.maps.OverlayView();
    ov.onAdd = function() {
        var proj = this.getProjection();
        var aPoint = proj.fromLatLngToContainerPixel(latlng);
        aPoint.x = aPoint.x+offsetX;
        aPoint.y = aPoint.y+offsetY;
        map.setCenter(proj.fromContainerPixelToLatLng(aPoint));
    }; 
    ov.draw = function() {}; 
    ov.setMap(this); 
};

// modified version that only returns a 'settable' center 
// using the (angularjs) $q promise service:

google.maps.Map.prototype.getCenterWithOffset = function(latlng, offsetX, offsetY) {
    var deferred = $q.defer();
    var map = this;
    var ov = new google.maps.OverlayView();
    var offsetCenter;
    ov.onAdd = function() {
        var proj = this.getProjection();
        var aPoint = proj.fromLatLngToContainerPixel(latlng);
        aPoint.x = aPoint.x+offsetX;
        aPoint.y = aPoint.y+offsetY;
        offsetCenter = proj.fromContainerPixelToLatLng(aPoint);
        deferred.resolve(offsetCenter);
    };
    ov.draw = function() {};
    ov.setMap(this);
    return deferred.promise;
};

// Using A

var latlng = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: latlng
});

map.setCenterWithOffset(latlng, 0, 250);

// or to get center:

map.getCenterWithOffset(this.getPosition(), 75, 0).then(function(offsetCenter) {
    map.setCenter(offsetCenter);
});