javascript - Google map not showing when inside a hidden div - Stack Overflow

admin管理员组

文章数量:1291696

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 ma space form)</small>
    <br>
    <textarea id="zipcodes"style="width:100%;"></textarea><br>
</div>

Doesn't fix it like I thought that it would.

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 ma space form)</small>
    <br>
    <textarea id="zipcodes"style="width:100%;"></textarea><br>
</div>

Doesn't fix it like I thought that it would.

• javascript
• google-maps
• smart-wizard

Share Improve this question Follow edited Jun 2, 2016 at 17:35 asked Jun 2, 2016 at 14:53 user6377028user6377028 1

• Please provide a Minimal, Complete, Tested and Readable example that demonstrates the issue. – geocodezip Commented Jun 2, 2016 at 15:07

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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 bees visible. To be sure you can put the resize trigger into a small timeout, when they click the div to display.

I had the same problem today and spend hours trying to solve it. i had 2 problems :

1. I didn't have the map object since it was created by a library.
2. the map wasn't inside an <iframe> so I couldn't simply reload it after showing my <div>.

But I found that every time the window is resized the map shows up because the resize event on the map is triggered automatically so actually all you have to do is to trigger the window resize event and everything will just work like magic.

Try this after you show your hidden <div> using javascript :

window.dispatchEvent(new Event('resize'));

Tested on Chrome and Firefox. Tested with fancybox2 library.

Hope this helps people ,like me, who don't like to go deeply inside any API to solve a simple problem.

I don't know if it would fit your solution, but a work around would be appending your maps element to the div with jQuery when it's shown and removing when hidden. Not ideal, but it might be a quick fix.

The resize doesn't always work, unfortunately. The technique I use is to render the map in a div offscreen, and then move it in when I want to display it.

<div id="offscreenMaps" style="position:absolute;top:-3000px">
   <div id="gMap"></div>
</div>

render your map normally; note that the map if visible, but its offscreen. Then to display it.

$('#gMap').appendTo('#visibleDiv');

You also avoid the clunkiness of re-rendering the map, because the map is already rendered. Clean and snappy.

本文标签： javascriptGoogle map not showing when inside a hidden divStack Overflow