3

My current set-up has the user click on a link to load content dynamically, which also includes loading in scripts. I want to be able to test whether or not an external script (specifically the Google Maps JS API) is loaded, and if it's not then to go ahead and do so.

Here is my code:

if(_href == "contact.html") {

// this will run everytime we navigate/click to go to "contact.html"
console.log("contact.html loaded");

// load the contact.js script, and once loaded,
// run the initMap function (located inside contact.js) to load the map
$.getScript("contact.js", function() {

    // store the length of the script, if present, in a varialbe called "len"
    var len = $('script[src="https://maps.googleapis.com/maps/api/js"]').length;
    console.log(len);

    // if there are no scripts that match len, then load it
    if (len === 0) {
        // gets the script and then calls the initMap function to load the map
        $.getScript("https://maps.googleapis.com/maps/api/js", initMap);
        console.log("Google Maps API loaded")
    } else {

        // otherwise the script is already loaded (len > 0) so just run the initMap function
        initMap();
    }
});

However, this does not work. Every time the user clicks to go to the contact page, "len" is always 0, whether or not the script is actually loaded already ( "len" should be more than 0 when it's loaded). It leads to this error in the log: log error

duncan
  • 31,401
  • 13
  • 78
  • 99
Attila
  • 1,097
  • 2
  • 19
  • 45
  • I'm really confused, in the callback for `$.getScript` the script is always loaded, but you're loading `contact.js` and seem to expect Google Maps to be loaded, even though the two scripts don't seem to have anything to do with each other ? – adeneo Feb 17 '16 at 17:55
  • you can find answer from http://stackoverflow.com/questions/9521298/verify-external-script-is-loaded – Lumi Lu Feb 17 '16 at 18:08
  • @adeneo I'm sorry if I confused you, but I've only been learning web development for a month now :p I hope this answers your question: `contact.js` contains a function which requires Google Maps to first be loaded - this js file basically creates the map, set's its parameters, etc. - so it's imperative Google Maps first be loaded, otherwise I'd get an error. I need both `contact.js` and the Google Maps API to be loaded before I call the function inside of `contact.js`. I only want Google Maps to be loaded once, otherwise I get an error (however, I get no such errors while loading `contact.js` – Attila Feb 17 '16 at 21:58

1 Answers1

7

Edit: The sensor parameter is no longer used so it has been removed from the code below.

If I understand correctly, I think you can ditch the len stuff and just check if google is loaded...is that true? If so try this.

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

     initMap();

 } else {

     var script = document.createElement("script");

     script.type = "text/javascript";

     script.src = "http://maps.google.com/maps/api/js?callback=initMap";

     document.body.appendChild(script);
}

This should get you going hopefully. Good luck!

hardba11
  • 1,478
  • 15
  • 27
  • Fixed your formatting! – duncan Feb 17 '16 at 18:28
  • 1
    @hardba11 This is perfect, thank you so much! I removed the "sensor=false" because I received an error, but it still works perfectly without that part: "The sensor parameter is no longer required for the Google Maps JavaScript API. It won't prevent the Google Maps JavaScript API from working correctly, but we recommend that you remove the sensor parameter from the script element." From here: https://developers.google.com/maps/documentation/javascript/error-messages – Attila Feb 17 '16 at 22:12
  • Yep - I should have chopped that part. Glad it helped you. Thanks for accepting the answer! – hardba11 Feb 18 '16 at 03:42
  • it works I tried to use it with official angular map component. I tried something like 'google' in window but it didn't worked out. It always says that google library is not loaded. But with the solution, google maps won't loaded twice, accidently. – Samiullah Khan Jan 13 '22 at 07:17