#_locationmap in modal window

you can try to wrapped the placeholder in a div and then I believe you can use modal window – https://jqueryui.com/dialog/

yes I wrapped it but I have still the grey area.
It’s a problem with the loading I guess. If I use locationmap without the modal everything looks good.
here is my code:

<a href="#" data-reveal-id="myModal">open</a>
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div style="width: 100%; height: 20rem;">#_LOCATIONMAP</div>
  <a class="close-reveal-modal" aria-label="Close">×</a>
</div>

How are you creating the modal window?

with foundation framework.
it is a problem with the locationmap preload, I guess.
if I use:

google.maps.event.trigger(map, "resize");

map.setCenter(marker.getPosition());
map.panBy(40,-55);

the map is working in the modal now, but only the info box with the location infos are empty when I start the modal again.

the locationmap loads in a hidden area. when I start the modal the location map has to load again. right? but thegoogle.maps.event.trigger(map, "resize");
resized only the map. but how can I load the balloon info box again?

ok I fixed it by doing this:

jQuery(document).bind("em_maps_location_hook", function( e, map, infowindow, marker ){
	$("#gmaps").click(function() {
		setTimeout(() => {
			google.maps.event.trigger(map, "resize");
			infowindow.open(map,marker);
			map.setCenter(marker.getPosition());
			map.panBy(40,-55);
		}, 500);
	});
});

Any better solutions?

in firefox works fine in safari not ??

ok I got it

setTimeout(function(){
...
}, 500);

works in both ??

Sweet. Thanks for the update, it may help someone else.

There is the same problem in my case with magnific-popup modal window.
I have landing page with index.php with <?php echo $EM_Event->output(‘#_LOCATIONMAP’); ?> in modal window part of code and file common.js where located all JavaScript code.
You mentionned you had working code:

jQuery(document).bind("em_maps_location_hook", function( e, map, infowindow, marker ){
	$("#myID").click(function() {
		setTimeout(function() {
			google.maps.event.trigger(map, "resize");
			infowindow.open(map,marker);
			map.setCenter(marker.getPosition());
			map.panBy(40,-55);
		}, 500);
	});
});

I tried to put this code in my common.js. It blocked load of page at all.
Please advice:
1. In what place should I put your code ? In common.js or between <?php><?> tags of index.php or where ever else?
2. What else code and variables should I put for working it correct ? Surely I should define ‘map’. But how can I define it ? Placeholder #_LOCATIONMAP – that is all I know about my map.
3. What is “em_maps_location_hook” and where else should I define it?

Thanks if you can help me.

Ok! I settled it. All works fine. Thank you for snippet!