Google Maps fit markers in custom bounds

Question

I have a Google Maps canvas that stretches the full width and height of the page. Overlaid on top of it is a header which is fixed height (100 pixels) and a sidebar which is a responsive width (20% + 5% margin).

Fiddle for demonstration: http://jsfiddle.net/L9yjvdLv/1/

The problem I'm facing is making sure that all the markers on the map are visible.

I tried playing around with fitBounds, but the problem is that the map doesn't take into account the overlaid elements, meaning markers will be behind the sidebar or header elements, or very close to them.

How do I zoom and center the map so that all markers are visible in the "usable" area of the map?

Any particular reason the header and sidebar need to be over the map or could you just fit it to the area inside? It's going to be tricky otherwise — adanot, Nov 24 '14 at 01:09
In the actual site, the header has a margin around it and the sidebar is semi-transparent, so for a more "immersive" experience (or whatever, I'm not the designer), the map needs to be full page like that. And I know it's tricky, I've been trying to wrap my head around this for quite a while now. — Emphram Stavanger, Nov 24 '14 at 01:14
Ah I see. Well, there might be a couple ways to do it. Take a look here at the map padding: https://developers.google.com/maps/documentation/android/map#map_padding This could help you. — adanot, Nov 24 '14 at 01:18
Here's an example: http://www.emanueletessore.com/adding-padding-google-maps/ — adanot, Nov 24 '14 at 01:31

score 1 · Accepted Answer · edited May 23 '17 at 12:06

You will need to use the map projection and fromLatLngToPoint to translate between coordinates and points to be able to take into account your different overlay elements.

For a full explanation, please check this answer.

function fromLatLngToPoint(latLng) {

    var scale = Math.pow(2, map.getZoom());
    var nw = new google.maps.LatLng(map.getBounds().getNorthEast().lat(), map.getBounds().getSouthWest().lng());
    var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
    var worldCoordinate = map.getProjection().fromLatLngToPoint(latLng);

    return new google.maps.Point(Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale), Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale));
}

My example only has a left sidebar overlay but you should be able to adapt the functions to your needs.

JSFiddle demo

Hope this helps.

Google Maps fit markers in custom bounds

1 Answers1