title: Google Maps v3 load partially on top left corner, resize event does not work
body: <p>Google Maps V3 loaded partially on top left corner. I tried the following methods:</p>
  
  <ul>
  <li><p>Add <code>google.maps.event.trigger(map, 'resize');</code> after map initialization.</p></li>
  <li><p>Rearrange <code>&lt;script&gt;</code> tag in index file</p></li>
  </ul>
  
  <p>But none works for me. How to solve this issue. Is there an official bug and solution to this issue?</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Bootstrap, from LayoutIt!&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;!-- Bootstrap css files --&gt;
      &lt;link href="stylesheets/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="stylesheets/bootstrap-responsive.min.css" rel="stylesheet"&gt;
      &lt;link href="stylesheets/style.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="contentbar"&gt;
        &lt;div id="dashboard-content" class="contentbar-main"&gt;
          Some Content
        &lt;/div&gt;
        &lt;div id="summary-content" class="contentbar-main" style="display:none;"&gt;
          &lt;div class="container-fluid"&gt;
            &lt;div class="row-fluid"&gt;
              &lt;div class="span12"&gt;
                &lt;div class="row-fluid"&gt;
                  &lt;div class="span7" id="sidebarid"&gt;
                    &lt;p&gt;Responsive web design is an approach, I often call it a mindset, because you have to change the way you think when you're going responsive. The basic idea behind it is: one design to rule them all - no m.domain.com, no touch.domain.com, no 3 separate CSS files, no 7 PSD files for each device or each orientation - just “domain.com” looking the same on desktop, tablet and phone.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="span5" id="contentbarid"&gt;
                    &lt;div class="row-fluid"&gt;
                      &lt;div class="span12"&gt;
                        &lt;input type="button" value="toggle" id="toggle-button"&gt;
                        &lt;div id="map-canvas" style="width:100%;height:400px;"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="row-fluid"&gt;
                      &lt;div class="span12"&gt;
                        &lt;p&gt;Responsive web design is an approach, I often call it a mindset, because you have to change the way you think when you're going responsive. The basic idea behind it is: one design to rule them all - no m.domain.com, no touch.domain.com, no 3 separate CSS files, no 7 PSD files for each device or each orientation - just “domain.com” looking the same on desktop, tablet and phone.&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- jQuery scripts --&gt;
        &lt;script type="text/javascript" src="javascripts/jquery.min.js"&gt;&lt;/script&gt;
        &lt;!-- Bootstrap script --&gt;
        &lt;script type="text/javascript" src="javascripts/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;!-- My basic script file--&gt;
        &lt;script type="text/javascript" src="javascripts/my-script.js"&gt;&lt;/script&gt;
        &lt;!--Google Map server url--&gt;
        &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAngjBDpe4ep15u5dvlnbZbn1ghA5uISZY&amp;sensor=false"&gt;&lt;/script&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p><strong>my-script.js</strong></p>
  
  <pre><code>var map;
  $(document).ready(function(){
    google.maps.visualRefresh = true;
      initializeMap();
  });
  
  //Load Map in Summary Tab
  function initializeMap() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
    google.maps.event.trigger(map, 'resize');
  }
  </code></pre>