2

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.

  • Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue. – geocodezip Jun 02 '16 at 15:07

4 Answers4

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

Matej P.
  • 5,303
  • 1
  • 28
  • 44
  • that does the trick, but for some reason it doesn't work with the tool that I am using jQuery Smart Wizard –  Jun 02 '16 at 16:53
  • I've never worked with the tool. What's the problem? – Matej P. Jun 02 '16 at 17:47
  • My jquery-smart-wizard hides divs and shows things to make a process wizard. Basically The problem is that I can click inspect(which triggers a page resize) and it makes my map appear instantly, but my code above does not trigger a resize like I figured it would. –  Jun 02 '16 at 17:56
4

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.

Ahmed Rafik Ibrahim
  • 538
  • 1
  • 4
  • 16
0

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.

GarethPN
  • 432
  • 4
  • 11
0

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.

Danial
  • 1,496
  • 14
  • 15