javascript - Google map does not display properly -

this question has answer here:

• google map api v3 off center if reloaded (not usual 'resize' thing) 4 answers

i have google map widget on twitter bootstrap's modal window.

when open modal window, map displayed on part of widget (example).

after re-size browser window map displayed properly.

i tried user $('#map').resize() (on div map) doesn't work.

any suggestion on issue appreciated.

i had solved problem before. google map not display when load map "display:none" canvas. bootstrap modal win hidden in beginning. have make sure map canvas can't hidden before google map finished loading.

my work around move canvas positon user can't see , load map it. after few second (maybe 500ms), move map right position (in case modal body).

i write simple example. try it:

html:

<div id="map" style="height:300px;margin-top:-1000px"></div> <div id="mymodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true">     <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>         <h3 id="mymodallabel">modal header</h3>     </div>     <div class="modal-body">      </div>     <div class="modal-footer">         <button class="btn" data-dismiss="modal" aria-hidden="true">close</button>         <button class="btn btn-primary">save changes</button>     </div> </div> 

javascript:

$(function(){         var mapoptions = {             zoom: 8,             center: new google.maps.latlng(-34.397, 150.644),             maptypeid: google.maps.maptypeid.roadmap         }         var map = new google.maps.map(document.getelementbyid("map"), mapoptions);         settimeout(function(){             $('.modal-body').append($("#map").css("margin-top","0px").get(0));         },500);     }); 

demo screen shot: