0

When I plot a route in google maps v3, I'm able to push to coordinates into a bounds object and then get the map to zoom to a level that shows the entire route. I'm also able to set the center of the map to equal the middle of the route:

var bounds = new google.maps.LatLngBounds();

bounds.extend(latlng); //do this for each coordinate

map.fitBounds(bounds);
map.setCenter(bounds.getCenter());

However, I've added an overlay on the left. The map is 100% screenwidth and goes underneath the overlay:

enter image description here

Is it possible to set the map boundaries to match what is visible? (I've highlighted what I mean with a green border) And there make sure the entire route is visible to the right of the overlay?

I hope this makes sense. Google manage to accomplish this on their map site.

Lee
  • 1,485
  • 2
  • 24
  • 44
  • The only idea that comes to mind is to adjust the map's width / position when showing the overlay (although that will probably change the area that is shown and shift it to the right - not sure what can be done about that without a lot of hassle.) See http://stackoverflow.com/questions/743214/how-do-i-resize-a-google-map-with-javascript-after-it-has-loaded for how to resize the map – Pekka Aug 08 '16 at 11:03
  • Check out this answer: http://stackoverflow.com/a/37500190/2661226 . It solves the same problem you are having. It calculates new bounds to account for overlaid area of map. – Matej P. Aug 08 '16 at 11:34
  • related question: [How to offset the center of a Google maps (API v3) in pixels?](http://stackoverflow.com/questions/3473367/how-to-offset-the-center-of-a-google-maps-api-v3-in-pixels) – geocodezip Aug 08 '16 at 12:52
  • related question: [How to offset the center point in Google maps api V3](http://stackoverflow.com/questions/10656743/how-to-offset-the-center-point-in-google-maps-api-v3) – geocodezip Aug 08 '16 at 12:52

1 Answers1

-1
  1. Need to reduce the zoom level.
  2. Manage the left panel in CSS by
user2992002
  • 9