可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

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

回答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.

回答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!

回答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

回答5:

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

回答6:

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)

回答7:

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

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

文章来源: Google Maps v3 load partially on top left corner, resize event does not work

标签

maps