Google maps api works with browser inspect element

问题

I've been struggling several day to try to fix google map canves plugin to in my app which uses twitter bootstrap.

The map is to buggy full of grey patches, and it's never well center. but what I lately notice d is that once I click "inspect element" on the page containing the plugin, everything is normal and the map works fine.

This might seem weird, but that is what I noticed. Anyideas what is the problem and how to fix it.

Note: I tested it on chrome and firefox browser.

Code

page triggering the modal : http://pastie.org/4594166 the modal html: http://pastie.org/4594195 gmaps: <script src='http://pastie.org/4595877.js'></script>

回答1:

I'm guessing your map is not shown by default, but code would be helpful. It sounds like you need to trigger resize when the map is shown. See resize under Events for the Map object:

https://developers.google.com/maps/documentation/javascript/reference#Map

[Added this script to work]

$(document).ready(function () { 
  $('#mymodal').on('shown', function () { 
    google.maps.event.trigger(map, 'resize');  
  });   
});

来源：https://stackoverflow.com/questions/12133318/google-maps-api-works-with-browser-inspect-element