How to show navigation tips on tabs or divs that have a display: none

Question

When I load a Google map (v3) using Directions into a div that is hidden from the user, the resulting map does not scale and center correctly. I tried to fire the resize event, but this partially resolved the issue.

Usually, when loading a map with directions, the API automatically finds the optimal view (i.e. zoom level and center) to show the entire trip. Any ideas what I'm doing wrong?

See JsFiddle

 <button id="show">Show</button> <div id="a"> <div id="map_wrapper" style="display:none"> <div id="map_canvas" style="height: 354px; width:713px;"></div> </div> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script> <script> var directionsService, directionsDisplay, map; function initialize() { directionsService = new google.maps.DirectionsService(); directionsDisplay = new google.maps.DirectionsRenderer(); var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true } map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); directionsDisplay.setMap(map); var start = 'New York, NY'; var end = 'Chicago, IL'; var request = { origin: start, destination: end, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } </script> </div> 

And javascript:

 $(document).ready(function(e) { $('#show').on('click', function() { $('#map_wrapper').show(); google.maps.event.trigger(map, "resize"); }); }); 

Answer 1

Change the finished function as follows:

 $(document).ready(function(e) { $('#show').on('click', function() { $('#map_wrapper').show(); google.maps.event.addListenerOnce(map, "resize",function(){ try{this.fitBounds(directionsDisplay.getDirections().routes[0].bounds) }catch(e){} }); google.maps.event.trigger(map, "resize"); }); }); 

It will be, when the route is accessible inside the map, set the borders of the map to the borders of the route.

Demo: http://jsfiddle.net/doktormolle/c2pC3/

Answer 2

You can initialize the map after clicking the button: delete the callback, hide initialize() when the button is pressed. http://jsfiddle.net/mB6AZ/2/

Answer 3

Save a copy of the DirectionsRoute LatLngBounds, and then map the map to these borders after changing it.

Working demo

 var bounds; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); bounds = response.routes[0].bounds; } }); $(document).ready(function (e) { $('#show').on('click', function () { $('#map_wrapper').show(0, function () { // this will fire once the map resize completes google.maps.event.addListenerOnce(map, 'idle', function () { this.fitBounds(bounds); }); google.maps.event.trigger(map, "resize"); }); }); });