WordPress.org

Ready to get started?Download WordPress

Forums

Events Manager
[resolved] Google API not available for dynamically loaded maps (6 posts)

  1. J.D. Grimes
    Member
    Posted 1 year ago #

    The JavaScript for the Google Maps API is loaded only when there are some maps to display on page load. Any maps dynamically added later won't display, unless there are maps in the page when it is loaded. Please consider implementing a workaround for this, even if its just a JS function that developers can call to make sure that the maps JS is loaded.

    Thanks for listening!

    http://wordpress.org/extend/plugins/events-manager/

  2. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 1 year ago #

    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':'http://maps.google.com/maps/api/js?v=3.4&sensor=false&callback=em_maps';
    document.body.appendChild(script);
    }`

  3. J.D. Grimes
    Member
    Posted 1 year ago #

    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.

  4. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 1 year ago #

    will look into that.

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

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

  5. J.D. Grimes
    Member
    Posted 1 year ago #

    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' : 'http://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.

  6. J.D. Grimes
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic