Issues loading map in a popup

treasureseason
(@treasureseason)

9 years, 1 month ago

Hello,

I’m currently using your map shortcode inside a popup created using Popup Maker plugin. For some reason the map does not fully display itself unless I resize the window, as you can see here:

The popup gets trigged when a visitor clicks “cliquez ici” on my website’s checkout page, found at http://bornmkg.com/dionybus/checkout/

Any idea why this is happening? Was so happy to have finally found a plugin that displays multiple locations on a map 🙁

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Author Matt Cromwell
(@webdevmattcrom)

9 years, 1 month ago

Hi there,

This is happening because the map is hidden until the popup renders it. Google Maps doesn’t know that the Map needs to be displayed. So we need to trigger the Maps javascript to “draw” the map when that button is clicked.

But it looks like that button isn’t on your site anymore. Can you put that up again? Then I can help with providing that JS snippet to trigger the map again.

Thread Starter treasureseason
(@treasureseason)

9 years ago

Hi Matt,

Thanks for getting back to me, I was away for a few weeks.

If you add an item to your cart the button should show up in the checkout page. Here is an item you can add: http://bornmkg.com/dionybus/evenement/ile-soniq-montreal-2017/

Here is a screenshot of the button on the checkout page that triggers the map:

Thanks a lot for your help
Plugin Author Matt Cromwell
(@webdevmattcrom)

9 years ago
Hi there,

So, you’ll want to trigger the redrawing of the map when that link is clicked. Add this (ideally conditionally so it only appears on your checkout page) and you should be good to go:
```
(function($) {
    $('.pum-trigger').on('click', function() {  
        setTimeout(function(){
        MapsBuilder.load_hidden_map(".pum-active");
        },100);
    });
})(jQuery);
```
Let me know how that goes.
Thread Starter treasureseason
(@treasureseason)

9 years ago

Hi again,

I’ve added this script to the header of the checkout page but still no luck. Do I have to add any classes to the button?

Thanks!

Plugin Author Matt Cromwell
(@webdevmattcrom)

9 years ago

I see it in the <head> at the moment. Try enqueuing it to the bottom of the page instead.

Thread Starter treasureseason
(@treasureseason)

8 years, 8 months ago

Hi Matt,

I’ve finally added this to the footer of the checkout page, but its still not working when I click the button. Here is another product to try out: http://dionybus.com/evenement/deadmau5-montreal-13-oct/

The link/trigger reads “cliquez ici”

Thanks!

Thread Starter treasureseason
(@treasureseason)

8 years, 8 months ago

Disregard my previous message, I was pressed with time so I found a different plugin that does the trick . thanks anyways!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Issues loading map in a popup’ is closed to new replies.