title: Google Maps API V3 not rendering competely on tabbed page using Twitter's Bootstrap
body: <p>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.</p>
  
  <p>I read some posts that advised people with the same problem to add the following code to the javascript:</p>
  
  <pre><code>google.maps.event.addDomListener(window, 'resize', function() {
      map.setCenter(homeLatlng);
  });
  </code></pre>
  
  <p>However this doesn't seem to be the solution. Please find the complete code below:</p>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  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 &lt; 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});
          }
      });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="tab-pane" id="orange" style="background-color:#E3F2FF;"&gt;
        &lt;div id="map_canvas" style="width:780px; height:400px; overflow:;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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....</p>
  
  <p>Updated code still shows the error:</p>
  
  <pre><code>&lt;div class="tab-pane" id="orange" style="background-color:#E3F2FF;"&gt;
      &lt;div id="map_canvas" style="width:780px; height:400px; overflow:;"&gt;&lt;/div&gt;
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="util.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        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 &lt; 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();
      }
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>