search

humaan / Modaal

An accessible dialog window library for all humans.
http://humaan.com/modaal/
MIT License
2.72k stars 183 forks source link

google map not loading with modaal #70

Closed mojbenzcar closed 8 years ago

danhumaan commented 8 years ago

@mojbenzcar can you please provide an example of your setup with a link, a jsfiddle or code examples here? Without those we can't help you find a fix.

We have successfully implemented google maps in a modaal instance using the after_open event to initialise the map. You may need to follow the same if you don't already.

mojbenzcar commented 8 years ago

@danhumaan Thanks for the quick response. I total missed after_open event in the documentation now its working. Thanks

danhumaan commented 8 years ago

Awesome @mojbenzcar, glad to hear!

cfaria commented 6 years ago

Hi, I'm sorry to reopen this issue (well, I'm not really reopening it). I just wonder if you guys can jsfiddle an example of loading a Google Map using Modaal.

Don't really know how to start. I was going to use modaal iframe and just pass the map url but maybe is a better way...

I'll understand if I don't get a response ;D

Thank you!

danhumaan commented 6 years ago

hi @cfaria, the iframe method will work, but if you want to embed the map using their api you can use the after_open event to call a function which initialises your google map.

$('.my-link').modaal({
    after_open: initMap
});

function initMap() {
   // all your google maps js here.
}
cfaria commented 6 years ago

Thank you @danhumaan, I tested it yesterday and the iframe method doesn't work to search urls for Google Maps (the ones like this https://www.google.com/maps/search/xxxx). Seems like there is an option in the Google Maps page header that prevents loading an URL directly in an iframe: 'X-Frame-Options' to 'sameorigin'.

So I guess I'd stick with the option you mentioned.

Thank you for pointing me up to the good way! ;D