Google Maps v3 load partially on top left corner, resize event does not work

Google Maps V3 loaded partially on top left corner. I tried the following methods:

Add google.maps.event.trigger(map, 'resize'); after map initialization.
Rearrange <script> tag in index file

But none works for me. How to solve this issue. Is there an official bug and solution to this issue?

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from LayoutIt!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap css files -->
    <link href="stylesheets/bootstrap.min.css" rel="stylesheet">
    <link href="stylesheets/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="stylesheets/style.css" rel="stylesheet">
  </head>
  <body>
    <div id="contentbar">
      <div id="dashboard-content" class="contentbar-main">
        Some Content
      </div>
      <div id="summary-content" class="contentbar-main" style="display:none;">
        <div class="container-fluid">
          <div class="row-fluid">
            <div class="span12">
              <div class="row-fluid">
                <div class="span7" id="sidebarid">
                  <p>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.</p>
                </div>
                <div class="span5" id="contentbarid">
                  <div class="row-fluid">
                    <div class="span12">
                      <input type="button" value="toggle" id="toggle-button">
                      <div id="map-canvas" style="width:100%;height:400px;"></div>
                    </div>
                  </div>
                  <div class="row-fluid">
                    <div class="span12">
                      <p>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.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- jQuery scripts -->
      <script type="text/javascript" src="javascripts/jquery.min.js"></script>
      <!-- Bootstrap script -->
      <script type="text/javascript" src="javascripts/bootstrap.min.js"></script>
      <!-- My basic script file-->
      <script type="text/javascript" src="javascripts/my-script.js"></script>
      <!--Google Map server url-->
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAngjBDpe4ep15u5dvlnbZbn1ghA5uISZY&sensor=false"></script>
    </body>
  </html>

my-script.js

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');
}

Solution 1:

I've had this issue before too and fixed it by waiting for the map's 'idle' state (i.e. when it's finished) and then calling the resize:

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
});

Solution 2:

I think your map is hidden at the time you create it: there's a display:none on the #summary-content div that the map is nested inside.

You should try triggering the resize event after that div is made visible instead of during initialization.

In fact, you could probably just call your initializeMap() function event at the time that div is made visible, instead of calling it in your .ready() function.

Solution 3:

I had the issue with all maps other than the first loaded map showing in the top left corner with the rest of the map having not loaded and therefore showing in grey.

Was scratching my head for some time but managed to solve it with:

google.maps.event.addListenerOnce(map, 'idle', function() {
       google.maps.event.trigger(map, 'resize');
       map.setCenter(latLng);
    });

It was a easy solution thanks to Ian Devlin and d.raev and just wanted to say thanks and share the code that solved it for me seeing as I can't comment or vote up yet!

I called that after creating the map with:

map = new google.maps.Map(document.getElementById("business-location-"+business_username), map_options);

so if you've got this problem put it right under where you create your map too!

Solution 4:

Google Maps does not play well with Bootstrap. Try adding the following CSS to your map element

#map-canvas img {
  max-width: none;
}

Twitter Bootstrap CSS affecting Google Maps

Google Maps v3 load partially on top left corner, resize event does not work

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Related

Recent Posts