Best IT Recipes

Google Maps v3 partially loads in the upper left corner, the resize event does not work

Google V3 maps are partially loaded in the upper left corner. I tried the following methods:

  • Add google.maps.event.trigger(map, 'resize'); after card initialization.

  • Reorder the <script> in the index file

But no one works for me. How to solve this problem. Is there an official error and solution to this problem?

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'); }
+26
jquery google-maps google-maps-api-3
Jun 12 '13 at 7:22
source share
7 answers

I also had this problem, and I fixed it, waiting for the state of "inactivity" of the card (ie after its completion), and then causing a resize:

 google.maps.event.addListenerOnce(map, 'idle', function() { google.maps.event.trigger(map, 'resize'); });
+56
Jun 12 '13 at 7:53 on
source share

I think your map is hidden during its creation: there is display:none on the div #summary-content , that the map is nested inside.

You should try to fire the resize event after the div becomes visible instead of initializing.

In fact, you could just call your initializeMap() function event while the div becomes visible, and not call it in your .ready() function.

+10
Jun 12 '13 at 7:32
source share

I had a problem with all the cards other than the first loaded map displayed in the upper left corner, and the rest of the map was not loaded and therefore is displayed in gray.

I scratched my head for a while, but I managed to solve it:

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

It was a simple decision thanks to Jan Devlin and D. Rayev and just wanted to thank and share the code that solved it for me, because I can not comment or vote so far!

I called it after creating the map with:

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

therefore, if you have this problem, put it right below where you create your map too!

+4
Apr 2 '15 at 12:26
source share

Google maps do not work well with Bootstrap. Try adding the following CSS to your map element.

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

Twitter Download CSS affecting Google Maps

+2
Jun 12 '13 at 7:37
source share

I got a similar problem (a map loaded into a container, extended by animation)

As @Ian Devlin part of the solution, it is to fire the resize event when everything is visible.
The second part is to fix the center (usually in the upper 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); });
+1
Mar 28 '14 at 8:45
source share

I know this is a relatively old question, however, today I ran into this problem and found a solution. It may (may not) be useful for people, however, if you need to show Google Maps onclick, then if you call the initilise () function inside this event and delay it, as can be 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 the preloader screen for initial loading the map.
  • '# maps-container' is a container for Google Maps (#googleMap)
0
Apr 01 '15 at
source share

Use the showhow event with the specified format. It worked for me.

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

0
Jul 28 '15 at 10:15
source share


More articles:


All Articles