Menu icon Foundation
Google Maps in Reveal Modal problem

I'm trying to get a Google Map to display correctly inside a Reveal Modal window.

If I simply place the iFrame inside a div on the page the map displays, so I can verify that the link is working correctly.

If I place the iFrame inside Reveal, the map only loads partway, and it's basically showing the entire world zoomed out, so it's not seeing the link correctly.

Ideas?

<div id="myModal" class="reveal-modal medium" data-reveal>
  <h2>Columbia City Jazz Dance School</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3307.2816770471304!2d-81.06972299999998!3d34.01097999999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f8a4ac06e466c1%3A0x1c69110143903c4!2sColumbia+City+Jazz+Dance+Company+%26+School!5e0!3m2!1sen!2sus!4v1407352053476" width="600" height="450" frameborder="0" style="border:0"></iframe>
  <a class="close-reveal-modal">&#215;</a>
</div>
            

         

Google Mapsreveal modal

I'm trying to get a Google Map to display correctly inside a Reveal Modal window.

If I simply place the iFrame inside a div on the page the map displays, so I can verify that the link is working correctly.

If I place the iFrame inside Reveal, the map only loads partway, and it's basically showing the entire world zoomed out, so it's not seeing the link correctly.

Ideas?

<div id="myModal" class="reveal-modal medium" data-reveal>
  <h2>Columbia City Jazz Dance School</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3307.2816770471304!2d-81.06972299999998!3d34.01097999999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f8a4ac06e466c1%3A0x1c69110143903c4!2sColumbia+City+Jazz+Dance+Company+%26+School!5e0!3m2!1sen!2sus!4v1407352053476" width="600" height="450" frameborder="0" style="border:0"></iframe>
  <a class="close-reveal-modal">&#215;</a>
</div>
            

         
Les Mizzell about 5 years ago

Thinking is was a Reveal/Maps issue, I switched to ColorBox for my modal window.
Had the same problem.

After a lot of research, I believe the solution will work for Reveal as well.
If you call the "resize" function after the modal opens, the map will fully load.

    $(document).ready(function(){
      $(".ajax").colorbox({
       width:'620px',
       height:'620px',
       scrolling:false});
      });

    $('.ajax').on('shown', function () {
           google.maps.event.trigger(map, 'resize');
            })

Ty Yang over 4 years ago

Here's another fix. Wrap the iframe inside a ... your iframe ..
and it will load correct after a second.

Ty Yang over 4 years ago

Another way to fix it is by wrapping the iframe inside the

This will load up correctly after a second.

Vincent Morel over 4 years ago

Hello.
I'am not able to "resize" after the modal is opened. Could soeone juste give me a little exemple with the use of

 $(document).on('open.fndtn.reveal', '[data-reveal]', function () {
  var modal = $(this);
});

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
  var modal = $(this);
});

Thanks, I'm stuck here...

MariaSmith over 4 years ago

I'am also not able to "resize" after the modal is opened. Did you finally managed to do it?

Rafi Benkual over 4 years ago

Adding New Reveal Content After Page Load

If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:

$(document).foundation();

Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.

$(document).foundation('reveal', 'reflow');

Rafi Benkual over 4 years ago

or this

 $(document).foundation();

$('.reveal-modal').on('opened', function(){
    $(window).trigger('resize');
});
OR

$(document).foundation();

$(document).on('opened', '[data-reveal]', function () {
    $(window).trigger('resize');
});

atelier over 3 years ago

I am very sorry to rapport that none of the above scripts worked. Foundation 6.1, I call in an iFrame an external html page with a dynamically (CMS) generated GoogleMap. That document shows the correct map when called directly. Also, when calling the GoogleMap direct in the HTML the map shows perfect as desired, nothing wrong with it.

The map also shows in the Reveal overlay, but not as desired. The pin is off centre.

Using the above methodes do not work att all.

Is it really impossible to use Reveal for this?
Thank you so much for giving some advise, we are totally stuck.

Rafi Benkual over 3 years ago

Have you been able to make it work with any modal? What do you think the issue is? Position: fixed?

atelier over 3 years ago

Hi thanks for reacting!
Problem is that the map does load in Reveal but it does not centre hence the marker is not visible. One must move the map with the mouse to see the marker. This is unwanted.

There is nothing wrong with the code I think because without the modal the exact same code generates this map centered, the marker where it should be, in the middle.

Reveal modal makes the map show off-set, and I would lile to know how to use Reveal F 6.1 to make this work.

I hope you could give me some advise. I tested every advised (above) extra reload script, added at the bottom of the html, tried both in the called html as in the receiving page, even in both, but this does not make any difference.

Foundation JS loads well, Reveal works as it should. But the map does not centre in a Reveal Modal Window, thus makes it useless for my client. I am sorry to tell you this.

atelier over 3 years ago

I think I figured it out..
I made these styles

.ShowMyMap {
  height: 400px !important;
}

#MyMapContainer {
  height: 0px;
  overflow: hidden;
}

In HTML this:

<p><a data-toggle="MyMapContainer">Karta</a></p>

<div id="MyMapContainer" data-toggler=".ShowMyMap">
PUT YOUR CODE FOR GOOGLE MAP HERE
</div>

What happens is that the height of the enclosing DIV is set to zero. The map loads, but is 'invisible'. Thanks to the data-togger JS we can toggle the css and the map shows.
I hope this helps someone else.

Mindaugas B. over 3 years ago

The only thing that actually worked for me. Hope it will help others as well:

$(".reveal").click(function() {
            setTimeout(function(){
                window.dispatchEvent(new Event('resize'));
            }, 10);
        })

Cheers!

Lionel about 3 years ago

Thanks for all your solutions

but any of this solutions works for my application

 

someone told me that a mask can be a solution..(show hide div? ) but also it do not work

 

i m using last version of foundation ...(6.2)

 

is there a working solution???

 

thanks