select of alternative route reduces zoom

Question

I'm using google maps api v3 and jquery mobile. I have a page where tab1 shows the map with the route and tab2 shows the route details (setPanel) . When i call setDirections for the response everything works great. The map is centered and the zoom is correct too. When i navigate to the details and select an alternative route and press tab1 to return to the map to see the new route, the zoom is off. Why does this happen? Can i do something to make it work?

Answer 1

When the directions are changed (to the alternate route) while the map is not displayed, it has the wrong size (its size is reported to the API as zero when it is hidden). You need to trigger the "resize" event on the map after it has been displayed.

from the documentation:

resize - Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize').

UPDATE: Looks like the directions_changed event doesn't fire when the map is hidden and the bounds is not set. Setting the bounds manually when the map is displayed seems to work.

function refresh(map) {
  google.maps.event.trigger(map, 'resize');
  var routeIndex = globVars.directionsDisplay.getRouteIndex();
  var routes  = globVars.directionsDisplay.getDirections().routes;
  globVars.map.fitBounds(routes[routeIndex].bounds);    
  alert('resize');                    
}

jsfiddle