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

Question

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

As proper indenting shows, you are missing one closing `` tag. — dda, Jun 12 '13 at 07:31
possible duplicate of [Google Maps Not Working in jQuery Tabs](http://stackoverflow.com/questions/9458215/google-maps-not-working-in-jquery-tabs) — geocodezip, Jun 12 '13 at 13:20
Please could you update the code with the final solution? I am in the same issue and nothing works for me. Thank you much — Alberto Crespo, Mar 10 '15 at 14:31

score 57 · Accepted Answer · answered Jun 12 '13 at 07:53

57

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

answered Jun 12 '13 at 07:53

Ian Devlin

18,534
6
55
73

That's not the same thing though, as you call your initializeMap() function when jQuery has decided the map is ready, not the map API itself. – Ian Devlin Jun 12 '13 at 07:56
This is the only solution that worked for me. I had the same issue and tried to fire the resize even manually like this `google.maps.event.trigger(map, 'resize');` triggered by a viewport resize. Unfortunately this did not solve the issue; only the solution above solved it. – vanthome Dec 19 '13 at 22:11
Thanks it helped me i was using Google Maps API V3 – Seeker Apr 14 '14 at 10:35
@IanDevlin I was struggling with this all day until I found this. Thanks!! I'm curious if you can briefly explain why this is sometimes necessary. I've used it without the event listener many times in the past without problems, so I want to understand better. – emersonthis Oct 12 '14 at 18:48
Oh man! Thanks! I've been searching for a while and tried so many things. This did it. – mogile_oli May 12 '15 at 15:28
Complementing: if you're using jQuery mobile, it would be better to create the map in the `pageshow` event. This code worked only inside this event listener, not inside `pagecreate` – CainaSouza Jun 12 '15 at 14:08
You're a king! Thanks. +1 – Bocaxica Jun 13 '15 at 14:58
Moving a map from Leaflet to Google Maps I replaced window.map.invalidateSize(); with the above code. Worked beautifully. +1 – Bennett Elder Oct 04 '15 at 16:34
Tried this but not works +1, but `window.setTimeout(function(){ google.maps.event.trigger(window.mainmap, 'resize'); }, 2000);` works, I was confused. – Tina Chen Feb 22 '17 at 07:33
Recreate my map using `window.mainmap = new google.maps.Map(dom, mapProperty);` and then bind idle event, then it works. – Tina Chen Jul 24 '17 at 09:02

score 10 · Answer 2 · answered Jun 12 '13 at 07:32

10

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.

answered Jun 12 '13 at 07:32

Michael Geary

28,450
9
65
75

Yes at first my #summary-content div is invisible,after click on navigation item the #summary-content will visible. I added resize event in onclick event of #summary-content.It works fine. But I dont need to load map every time navigating between pages. – Ramprasad Jun 12 '13 at 07:51
Initialising the map when making the element visible is what worked for me. Thanks. – Liam Aug 11 '16 at 14:37

score 4 · Answer 3 · answered Apr 02 '15 at 12:26

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!

All the solution above didn't worked for me except this. Thanks man! — Angelo Joseph Salvador, Aug 30 '16 at 06:59

score 2 · Answer 4 · edited May 23 '17 at 11:47

2

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

edited May 23 '17 at 11:47

Community

1
1

answered Jun 12 '13 at 07:37

Maksym Kozlenko

10,273
2
66
55

1

Change CSS selector to "#map-canvas img". – Maksym Kozlenko Jun 12 '13 at 12:24
no it does not works.As Mr.Michael Geary said,my div is not visible when map load. I try to trigger resize event when my div is visible.But it also not works. – Ramprasad Jun 12 '13 at 13:05
1

This code works. You have to change the css selectors to match your code. – Fa11enAngel Jun 17 '14 at 19:13

score 1 · Answer 5 · answered Mar 28 '14 at 08:45

1

I just got a similar issue (map loaded in container expanded with animation)

As @Ian Devlin part of the solution is, is to trigger resize event after all is visible.
The second part is to fix the center (as it is usually in the top left corner):

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
   map.setCenter(center); // var center = new google.maps.LatLng(50,3,10.9);
});

answered Mar 28 '14 at 08:45

d.raev

9,216
8
58
79

this was the only solution to work for me (google map in an invisible modal) – apoq Jun 05 '14 at 02:26

score 0 · Answer 6 · answered Apr 01 '15 at 14:07

I know this is a relatively old question now however, I have come across this issue today and found a resolution. It may (may not) be helpful to people, however if you require to show the Google Maps onclick then if you call your initilise() function within this event and delay it as seen from my code below.

Google Maps API function - initialise();

var locationLondon = new google.maps.LatLng(51.508742, -0.120850);
var map;    

    function initialise(location){
        //Object to define properties
        var mapProp = {
            center: locationLondon,
            zoom: 15,
            disableDefaultUI:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

        //Map Marker
        var marker = new google.maps.Marker({
            position: locationLondon,
            map: map
        });

        marker.setMap(map);
    };

My jQuery event call

    $( document ).ready(function(){
        $( '#maps-container' ).hide();
        $( '#card-1 .fa-info-circle' ).click(function(event){
            event.stopPropagation();
            $( '#maps-container' ).delay( 1000 ).fadeIn( 'slow' );
            $( '#map-load' ).delay( 1000 ).fadeOut( 'slow' );
            setTimeout(initialise, 1000);
        });
    });

'#map-load' is a preloader screen for the map's initial load
'#maps-container' is the container for the Google Map (#googleMap)

score 0 · Answer 7 · answered Jul 28 '15 at 10:15

0

Use pageshow event with the shown format. It worked for me.

$(document).on('pageshow', '[data-role="page"]#mapPage' , function(){
initialize(); });

answered Jul 28 '15 at 10:15

Tony

53
9

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

7 Answers7

Linked