Google Maps API V3 not rendering competely on tabbed page using Twitter's Bootstrap

Question

I'm using Twitter's Bootstrap for defining my CSS. I have made a page with three tabs. The second tab contains a map built with Google Maps. However when opening the page and switching to the second page with the map, the map is not rendered completely. Once I reload the page with the google maps tab as the selected tab the map loads entirely.

I read some posts that advised people with the same problem to add the following code to the javascript:

google.maps.event.addDomListener(window, 'resize', function() {     map.setCenter(homeLatlng); }); 

However this doesn't seem to be the solution. Please find the complete code below:

Javascript:

<script type="text/javascript"> function initialize() {     google.maps.event.addDomListener(window, 'resize', function() {         map.setCenter(homeLatlng);     });      var myLatlng = new google.maps.LatLng(37.4419, -122.1419);     var myOptions = {         zoom: 13,         center: myLatlng,         mapTypeId: google.maps.MapTypeId.ROADMAP     }     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);     downloadUrl("data.xml", function(data) {         var markers = data.documentElement.getElementsByTagName("marker");         for (var i = 0; i < markers.length; i++) {             var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),                                  parseFloat(markers[i].getAttribute("lng")));             var marker = new google.maps.Marker({position: latlng, map: map});         }     }); } </script> 

HTML:

<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">       <div id="map_canvas" style="width:780px; height:400px; overflow:;"></div> </div> 

How can I resolve this? Maybe I can add some javascript that reloads the google maps part once the tab is selected but I don't know how to do this....

Updated code still shows the error:

<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">     <div id="map_canvas" style="width:780px; height:400px; overflow:;"></div>     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>     <script type="text/javascript" src="util.js"></script>     <script type="text/javascript">       function initialize() {         google.maps.event.addDomListener(window, 'resize', function() {             map.setCenter(homeLatlng);         });          var myLatlng = new google.maps.LatLng(37.4419, -122.1419);         var myOptions = {           zoom: 13,           center: myLatlng,           mapTypeId: google.maps.MapTypeId.ROADMAP         }         var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);         downloadUrl("data.xml", function(data) {           var markers = data.documentElement.getElementsByTagName("marker");           for (var i = 0; i < markers.length; i++) {             var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),                                         parseFloat(markers[i].getAttribute("lng")));             var marker = new google.maps.Marker({position: latlng, map: map});            }         });         map.checkResize();     }     </script> </div> 

Answer 1

I was battling with this issue as well. I was using a modal form and it rendered the map when it was hidden. When the tab is shown, you need to trigger this code:

google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() ); 

Hopefully it will work for you. If that doesn't work, here is the link where I found the solution. Maybe there will be another helpful comment.

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

Answer 2

There's a lot of solutions here and frankly they're all wrong. If you have to hi-jack the default functionality of Bootstrap tabs, you might as well not use Bootstrap tabs. If you're only calling resize after the tab is shown, you may still have issues with the GMaps interface (zoom level and such). You simply have to initialize the map after the tab is visible.

var myCenter=new google.maps.LatLng(53, -1.33); var marker=new google.maps.Marker({     position:myCenter });  function initialize() {   var mapProp = {       center:myCenter,       zoom: 14,       draggable: false,       scrollwheel: false,       mapTypeId:google.maps.MapTypeId.ROADMAP   };    var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);   marker.setMap(map);    google.maps.event.addListener(marker, 'click', function() {      infowindow.setContent(contentString);     infowindow.open(map, marker);    });  };  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {     initialize(); }); 

You can see a working example in this bootply: http://www.bootply.com/102241

Note: if your interface is still glitchy, it could be this issue: Google Maps API V3 : weird UI display glitches (with screenshot)

Using the most recent gmaps api, you just need to add this to your styling:

.gm-style img { max-width: none; } .gm-style label { width: auto; display: inline; }