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!
