I see a lot of people with having resizing issues when showing a hidden div, but I am having a slightly different problem that requires a different solution. My google map works fine normally, but I am now building a wizard to only show steps of my page at a time. When I enable the hidden div, the map just remains baige for a period of time before it shows and sometimes does not load at all, but then I move it outside of the hidden div to the main body section and it loads instantly. I do not understand and it is not showing any errors. Please help. Refreshing the map fixes the problem usually, but
<div id="step-3" onshow="setTimeout(google.maps.event.trigger(map, 'resize'), 3000)">
<h2 class="StepTitle">Step 3 Content</h2>
<label>Select Job Locations: </label>
<div id="map-canvas" style="width:100%; height:400px;"></div>
<br>
<label>Zip codes in region:</label><small> (manually add zipcodes seperated in comma space form)</small>
<br>
<textarea id="zipcodes"style="width:100%;"></textarea><br>
</div>
Doesn't fix it like I thought that it would.
When the map's div, or it's parent, or it's parent parent (any predecessor) has display:none style, and you create the map, the map view won't initialize properly. You have to trigger resize event on map for it to reinitialize the map view. Just try to call:
google.maps.event.trigger(map, "resize");
right AFTER the div becomes visible. To be sure you can put the resize trigger into a small timeout, when they click the div to display.