I have a relatively simple web app, that allows the user to enter two waypoints (from and to locations), then click a button to get the directions itinerary and a map with the route path plotted on the map.
The app was laid out so that the form, the itinerary and the map where in separate “tabs” and the layers could be shown and hidden based on the tab selection.
Oddly, the map would always be zoomed right out to the minimum zoom (entire world view) although the pushpins (waypoints) and route path were correctly plotted, the map bounds were not being honored. If the map was visible, then those route path bounds were honored and the map functioned as expected.
An example of this is here: http://jsfiddle.net/junto/DMR2T/
Click on ‘Get Directions’ when the map is visible, and the map is zoomed to the correct bounds. Then toggle the map and click ‘Get Directions’ again. Toggle the map back to visible. You’ll see the map has the incorrect zoom level and bounds.
Lastest build of Google Chrome, Safari, Firefox all display this issue. Internet Explorer does not.
Is this a bug?
My guess is that in order to properly compute zooming and bounds, the map needs to know its display size. In order for the map to know that, it needs to be visible. So a workaround would be to move the map off screen rather than hiding it.
See my updated example here: http://jsfiddle.net/ZWzjC/
In my example I simply set a negative left margin, I’m sure there are more clever ways to move something off the screen while maintaining its visibility. I tried using visibility:hidden but that doesn’t seem to hide the map correctly. display:none won’t work since that causes the map to have 0 dimensions, and that’s what .toggle() probably uses internally anyway.