Maps with ajax loaded pages

TheodorGr
(@theodorgr)

3 years, 6 months ago

I have a wordpress template that uses ajax to load content when navigating through the site, leaving the header and footer section “unchanged”. I need this functionality due to using this template for a webradio and need to have an audio player “uninterrupted”.

Unfortunately, when I navigate to a page – post this way, the google map is not loaded – the browser’s error console informs me that the Google API keys are missing, something that I suspect happens because when content of the page is fetched via ajax, the footer’s script is not being refreshed. When I refresh the page manually the map is indeed loaded but of course my audio player is interrupted.

is there any way I could bypass this problem? Ideally I think I need some sort of javascript script upon sucess of ajax to “reload” the map. Any clues?

Thanks

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

Stonehenge Creations
(@duisterdenhaag)

3 years, 6 months ago
Just thinking out loud, but what if you load the events-manager.js in the body? In your functions.php make a small snippet:

function em_body() {
include (‘url/wp-content/plugins/events-manager/includes/js/events-manager.js’);
}
add_action(‘init’,’em_body’);

Where url = the complete url of your site.
- This reply was modified 3 years, 6 months ago by Stonehenge Creations. Reason: Typo
Thread Starter TheodorGr
(@theodorgr)

3 years, 6 months ago

Thank you for your suggestion. I tried it but it didnt work… Dont know if “enqeueing” the script above would work…although I suspect this is already done anyway.

Plugin Support caimin_nwl
(@caimin_nwl)

3 years, 6 months ago

Just to check something: Are the maps working correctly when pages are loaded normally.

Thread Starter TheodorGr
(@theodorgr)

3 years, 6 months ago

Yes, the maps are loaded correctly when a page is manually refreshed by the browser or when it is the first ever page visited.

Plugin Support caimin_nwl
(@caimin_nwl)

3 years, 6 months ago

Are you loading the Events Manager JavaScript files in the header / footer before running your AJAX?

Thread Starter TheodorGr
(@theodorgr)

3 years, 6 months ago

The problem is the wordpress template I use has ajax loading as a feature so I am not really sure how it does what it does. I surely know that the header and footer sections are not refreshed when you visit a page, and ajax just changes (loads) the content (and of course changes the URL to display the “new” URL as if the page had been changed). I suspect whatever script is therefore designed to be loaded in the header or footer sections, is not being reloaded when I visit a page.
I dont know if this info helps, but for example I had the same problem with “add to any” share buttons (the buttons wouldnt show up when visiting a page fetched with ajax) but managed to overcome it by adding
a2a.init(‘page’) in the javascript that provides ajax functionality and everything works now. Ideally Id need a similar function for google maps but this is as far as I have gone.
Thread Starter TheodorGr
(@theodorgr)

3 years, 4 months ago
Since there seems to be no way to resolve the issue… how could I “construct” a simple google maps URL to display in my events (instead of using the embed map)?

Thanks for any suggestions
- This reply was modified 3 years, 4 months ago by TheodorGr.
Plugin Support caimin_nwl
(@caimin_nwl)

3 years, 4 months ago

Haven’t tried it but you should be able create a basic Google Maps template using their API, then use a database query to get the location stored in Events Manager.

If it was me, I’d probably create a test map with a static address and make sure it can be loaded via AJAX before moving on to the database part.