Google Maps plugin – possible to integrate with other Google Maps-dependent code?

Hi, we have some existing code on our site where we load Google Maps with a call like this:

wp_enqueue_script( ‘google-maps’, ‘http://maps.googleapis.com/maps/api/js?key=AIzaSyCSveOo32httVbw8xGThaEEWmNUA760lhg&sensor=false’, array(), ‘3.0’, TRUE );

…then we had some other javascript being loaded like this:

wp_enqueue_script( ‘mrt-prop-search’, get_template_directory_uri() . ‘/js/mrt-prop-search.js’, array(‘jquery’, ‘jquery-typewatch’, ‘google-maps’:wink:, ‘1.0’, TRUE );

So it would load after Google Maps loaded. All was well.

We love your Google Maps plugin and are trying to include it on our site, however, with our existing code it of course loads the Google Maps API javascript code twice on the page.

So, we removed our Google Maps call and are trying to set our code to load after yours does (by setting our js dependency to ‘google_maps_api’:wink:… but still no luck. I believe it’s because your code is calling the Google Maps API asynchronously and our code is assuming that the Google Maps API has already loaded.

So, my question =). Is there a way that we can set our code to load after the Google Maps API has really loaded? Would love to know your thoughts on this – thank you!

– Mike

  • Vladislav
    • Dead Eye Dev

    Hi,

    Depending on how your javascript works, perhaps you can postpone the execution until a map is initialized on your page? When this happens, we know that a) Google Maps API is loaded, and b) the map object is instantiated and ready to be worked with. When the plugin initializes a map, it throws a “agm_google_maps-user-map_initialized” jQuery event on document node, so you can perhaps hook up to it. For a quick example, suppose your javascript code has initialize() function that sets everything up – in this case, you could do something like this in your script:

    function initialize () { ... }

    (function ($) {
    $(document).bind("agm_google_maps-user-map_initialized", function (e, map) {
    initialize();
    });
    })(jQuery);

    This is, of course, just a simple example but hopefully it’s enough to get you started. If you need more help integrating your script, I’d be happy to help with it.

  • karikas
    • Flash Drive

    Hey guys, thanks again for your help. That snippet actually did not work because on the page in question, your plugin is loading the Google Maps API code but we aren’t using one of this plugin’s actual map components on the page, so agm_google_maps-user-map_initialized() was never firing.

    We did find a solution though by seeing how you check for the Google Maps API to be present, which is this code:

    if (typeof google === 'object' && typeof google.maps === 'object') {
    // code
    }

    So we’re all set! Thanks again for your great support.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.