Google maps api works with browser inspect element

Question

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: ``

Accepted Answer

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

Google maps api works with browser inspect element

Solution

Problem