Displaying multiple Google Maps asynchronously

Question

I currently have a page which shows results of a search. When the user clicks on a result, details are fetched using ajax and loaded into the page. In these details, there is a Google map.

Previously, I had the Gmaps script with callback in the details page. But I ran into this problem that the Gmaps script was inserted multiples times if the user clicked on several results.

Now, I load the script in the results page and the details page calls the initialize function while passing all the necessary parameters. But I get an undefined is not a function error.

So my question is: how to structure the Gmaps script, callback, and asynchronous initializing of the maps between the two pages (results, and details)?

results page

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=[key]"></script>

function initialize(params) {
var directionsService, directionsDisplay, map;  

directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();

// your typical gmaps stuff

}

details page

<div id="map_canvas"></div>

initialize(params);

possible duplicate of [Async Google Maps API v3 undefined is not a function](http://stackoverflow.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function) — Dr.Molle, Jan 18 '13 at 18:52
Loading one map is not the problem (by adding the callback). What I'm not sure about is how to use the `callback` of gmaps repeatedly without getting the error of "you have included the Google Maps API multiple times on this page". — greener, Jan 18 '13 at 19:34
check for the existence of `google.maps`. When it exists, simply call initialize, when not, use the loader — Dr.Molle, Jan 18 '13 at 20:06

GFoley83 · Accepted Answer · 2015-03-01T21:21:27.473

You can just see if the Google Map's script has already loaded by checking for the "google" global variable that gets added to the DOM.

Full jsfiddle example here: http://jsfiddle.net/gavinfoley/yD8Qt/.

    // dom ready
    $(function () {
        if (typeof google === "undefined") {
            alert("Lazy loading Google maps");
            lazyLoadGoogleMaps();
        } else {                
            alert("Google Maps is already loaded");
            googleMapsLoaded();
        }
    });

    function lazyLoadGoogleMaps() {
        // Note the callback function name 
        $.getScript("http://maps.google.com/maps/api/js?sensor=true&callback=googleMapsLoaded")
        .done(function (script, textStatus) {            
            alert("Google maps loaded successfully");
        })
        .fail(function (jqxhr, settings, ex) {
            alert("Could not load Google Maps: ", ex);
        });
    }

    // This function name is passed in to the Google maps script load above
    // and will be called once Google maps has loaded
    function googleMapsLoaded() {           
        alert("Done!");
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

I managed to solve it thanks to the comment from DrMolle but your answer is very good. In fact, thanks for introducing me to `$.getScript`. — greener, Feb 02 '13 at 05:46
No worries! `$.getScript` is just a shorthand wrapper for `$.ajax` but I like it cos it reads better / more obvious what you're doing. — GFoley83, Feb 02 '13 at 06:15

Displaying multiple Google Maps asynchronously

1 Answers1