Question

I am creating a google map with some specific requirements.
The map is lets say 800×600 pixels wide.

I need all the markers to show in an area of 400x600px on the left hand side of the map.
The other half is covered with navigation panels (but the map must be visible in the margins behind the panels).

I’ve been able to set the zoom level according to all the markers using LatLngBounds and fitBounds, but that still fills the entire area.

How do I create a sub bounding area inside the viewport to contain all the markers and adjust zoom accordingly. I show only markers for a specific city.

This is what I need to achieve visually:

+————————————————+
|..+—–+..+——-+…..+———————+|
|..|.nav.|….|..nav..|……|…marker area……||
|..+—–+…+——+…..+———————+|
+————————————————+

The outer block represents the google map, and the spaces between the sub blocks show the map panes. So I need a sub-viewport inside the main viewport somehow.

Any ideas?
(suggestions to enhance the question are welcome as well, use comments for that pls.)

Answer 1

Interesting problem.

My suggestion:

1. Start with your bounds
2. Using the Projection, find out what coordinates would extend the bounds to the left by 400px.
3. Call fitBounds with these new coordinates.