CODEWITHSUNDEEP
javascriptgoogle-mapssmart-wizard
user6377028
user6377028

Reputation:

Google map not showing when inside a hidden div

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.

Upvotes: 2

Views: 7352

Answers (4)

Danial
Danial

Reputation: 1604

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.

Upvotes: 0

Ahmed Rafik Ibrahim
Ahmed Rafik Ibrahim

Reputation: 547

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.

Upvotes: 4

Matej P.
Matej P.

Reputation: 5383

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.

Upvotes: 5

GarethPN
GarethPN

Reputation: 482

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.

Upvotes: 0

Related Questions