Google API not available for dynamically loaded maps

I’m guessing this is for an AJAX-driven theme?

Unfortunately it’s not feasible to account for themes that do this, mainly due to the fact that we can’t predict how each of these themes go about it.

You’d need to add JS to your theme to fire a check, which would probably be a copy/paste of our code with a check if maps is already loaded:

`/* Load any maps */
if( $(‘.em-location-map’).length > 0 || $(‘.em-locations-map’).length > 0 || $(‘#em-map’).length > 0 ){
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.src = (EM.is_ssl) ? ‘https://maps.google.com/maps/api/js?v=3.8&sensor=false&callback=em_maps’:’https://maps.google.com/maps/api/js?v=3.4&sensor=false&callback=em_maps’;
document.body.appendChild(script);
}`

Thanks, I was just hoping there might be a more forward compatible solution. Like maybe set a global JS variable (like em_maps_is_loaded) and give it a true or false value based on whether the maps were loaded. Then developers could check if they had been loaded yet. Also, could you create a named JS function to load the scripts? Then we could just do something like this:

if ( ! em_maps_js_is_loaded ) {
     em_load_maps_js();
}
// Maps are now loaded.
// ... Do stuff here ...

I think this would be better, because then I don’t have to worry about if I’m loading a compatible version of the API, or creating my own check to see if the API is already loaded. In other words, it would be more forward compatible. So if you could add something like this it would be great. Meanwhile, I’ll try to find a short term solution. Thanks.

will look into that.

one thing you can do already is just check maps in general, e.g.

https://stackoverflow.com/questions/9228958/how-to-check-if-google-maps-api-is-loaded

Thanks.

For anyone else trying to do this, here is what I ended up doing:

// Make sure that Google Maps API is loaded.
if ( typeof google !== 'object' || typeof google.maps !== 'object' ) {

 	var script_src = ( EM.is_ssl ) ? 'https://maps.google.com/maps/api/js?v=3.8&sensor=false&callback=em_maps' : 'https://maps.google.com/maps/api/js?v=3.4&sensor=false&callback=em_maps';
	jQuery.getScript( script_src  );
}

// Now initialize all maps.
em_maps();

In this case, each map was being loaded and there was only one map in the DOM at any one time. Otherwise, it would probably not be a good idea to just use em_maps(). You’d probably want to pull some from its source (in /wp-content/plugins/events-manager/includes/js/events-manager.js @line 715) but only target any new maps. In this case, all maps on the page were always new.

Oh, the only thing that I think could be improved in this solution is if events manager supplied a way to check whether the maps JS was loaded and a way to load it (better yet, a function that could be called which would perform its own check and load it only if needed). That way there would be no worries about updating the API version, etc.