Google Maps: redefine center point, fit bounds to specific area

Question

Here's a real challenge I'm running into using the Google Maps API. I've got an app that is full-screen, there's a Google map that fills the entire background. Some of the UI chrome for this app covers parts of the maps, so, in effect, the entire map is not always visible.

Instead, we have a "primary" visible area, and a "partially" visible area, like so:

Here are my questions:

Normally if you want to center something in the view you call map.setCenter(latLng) This puts the given latLng in the exact center of the map canvas. However, in my case, I'd like to put the given latLng not in the exact center of the canvas, but in the center of the fully visible portion of the canvas.

I haven't been able to find any documentation of a way to set a geographic point to anything other than the exact center of the canvas. Does anyone know if this is possible?

Likewise, if you want to zoom the map so it fits a number of points, you can pass all of these latLngs to a bounds object, on each one calling bounds.extend(latLng), and then map.fitBounds(bounds).

However, this will fit the map so that the points are displayed within the entire map canvas. Is it possible to make them fit to a specific portion of the canvas instead?

Thanks for any insight here.

Answer 1

After creating the map use the panBy-method of the map to pan the map by the given pixels.

map.panBy(rightPadding/2,-topPadding/2);

Demo: http://jsfiddle.net/doktormolle/JsBEx/