38

I was wondering if it is possible to offset the center of a map in Google maps api v3. I would like to control this offset in pixels, since by lat and lng seems wrong and very difficult to predict.

I just need to place a marker, and then offset the center by 250px so I can place some other content in the middle of the map.

Hope someone can help!

Landitus
  • 1,890
  • 4
  • 23
  • 27

5 Answers5

59

Found this question when researching and thought I should provide an answer:

function map_recenter(latlng,offsetx,offsety) {
    var point1 = map.getProjection().fromLatLngToPoint(
        (latlng instanceof google.maps.LatLng) ? latlng : map.getCenter()
    );
    var point2 = new google.maps.Point(
        ( (typeof(offsetx) == 'number' ? offsetx : 0) / Math.pow(2, map.getZoom()) ) || 0,
        ( (typeof(offsety) == 'number' ? offsety : 0) / Math.pow(2, map.getZoom()) ) || 0
    );  
    map.setCenter(map.getProjection().fromPointToLatLng(new google.maps.Point(
        point1.x - point2.x,
        point1.y + point2.y
    )));
}

If your Google maps variable isn't map use the following call function reference:

function map_recenter(map,latlng,offsetx,offsety) { ...
rmNyro
  • 351
  • 2
  • 14
iambriansreed
  • 21,935
  • 6
  • 63
  • 79
  • I'm using it on onMarkerClick(). When I click over a Mark works perfect, but if I fire the Mark (from code) with google.maps.event.trigger(thisMark, 'click'); don't work... but no matters (I can live with that)... It's the best solution to do offset. Thanks!!! – equiman Dec 13 '12 at 05:52
  • Beautiful and elegant solution. – ChrisRich Jul 04 '13 at 05:52
  • 5
    This function should be called after projection_changed event has fired otherwise map.getProjection() call would throw a js error. google.maps.event.addListenerOnce(map,"projection_changed", function() { map_recenter(...); }); – smohadjer Nov 24 '15 at 13:31
  • if I use Math.pow(2, this.map.getCameraZoom() the displacement is very small, why? – Wrong Jan 30 '19 at 15:23
  • This works well, but is there a way to modify it to use panTo instead of setCenter? Would be nice if it transitioned rather than jumped. – JacobTheDev Mar 21 '19 at 19:11
23

Refer to this question: How to offset the center of a Google maps (API v3) in pixels?

This is a modification of an answer I provided here.

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

You can then just use it like so:

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

Here is a working example.

Community
  • 1
  • 1
Dean Or
  • 2,822
  • 2
  • 26
  • 25
  • Im currently using an iFrame to load my map on page, it comes with a nice white background box of information about the point of interest, is this achievable with the projection method? – AndrewBramwell Aug 24 '14 at 16:13
8

there's also the panBy method of the map object... you can offset by a specified number of pixels. However, you'll get a smooth transition animation, which may not be what you wanted. I'm looking for the same thing myself, will let you know what I find.

Chris4d
  • 595
  • 4
  • 11
4

Have a look at the MapCanvasProjection object - http://code.google.com/apis/maps/documentation/javascript/reference.html#MapCanvasProjection

You can get the map center latLng (map.getCenter()) then convert that to the container pixel coordinates with fromContainerPixeltoLatLng()

skarE
  • 5,880
  • 2
  • 23
  • 23
  • 1
    Is it possible to do this without rendering the map and then redrawing it, i.e. without the user seeing a jump? – Richard Feb 09 '12 at 21:30
0

Example for latitude offset to pan a bit lower (on a negative lat, idk if positive lat will give the same result)

map.setZoom(15);
let latV = e.latLng.lat()+0.0135;
let lngV = e.latLng.lng();
map.panTo({lat: latV, lng: lngV});
Rodrigo Achcar
  • 1
  • 1