google map not loading with modaal

[mojbenzcar]

No description provided.

[danhumaan]

@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]

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

[danhumaan]

Awesome @mojbenzcar, glad to hear!

[cfaria]

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]

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]

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