Loading google maps asynchronously

Question

I am trying to load my google map asynchronously and it works but it is loading the map in twice. If I remove "box.onload = initialize;" this stops that problem but then the infobox doesn't show...how do I fix my code so it only loads the map once AND shows the infobox.

function loadScript() {
   var map = document.createElement('script');
   map.type = 'text/javascript';
   map.src = 'https://maps.googleapis.com/maps/api/js?key=key_goes_here&sensor=false&callback=initialize';
   document.body.appendChild(map);  

   map.onload = function() {
      var box = document.createElement('script');
      box.type = 'text/javascript';
      box.src = 'https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js';
      document.body.appendChild(box);
      box.onload = initialize;
   };
}           
window.onload = loadScript;

Synectics

Remove the callback from your map.src – Ind

That stops the map from working altogether :( – Synectics

The problem is it looks to me like you're going to end up calling initialize twice. Maybe the box.onload should call a different function – Ind

That's what I thought and that's where I get stuck :( – Synectics

Might be useful to add your initialize function to the question too – Ind

This question is similar to: How can I check whether Google Maps is fully loaded?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – Narcose

Answer 1

The map appears twice because you're calling initialize twice.

Before fixing that, let's simplify your code a bit. Never let yourself repeat blocks of code like that; instead make it into a common function.

Also, don't load infobox.js from googlecode.com; Google Code is not a CDN. Load your own copy.

So, the code may look like this:

function addScript( url, callback ) {
    var script = document.createElement( 'script' );
    if( callback ) script.onload = callback;
    script.type = 'text/javascript';
    script.src = url;
    document.body.appendChild( script );  
}

function loadMapsAPI() {
    addScript( 'https://maps.googleapis.com/maps/api/js?key=key_goes_here&sensor=false&callback=mapsApiReady' );
}

function mapsApiReady() {
    addScript( 'infobox.js', initialize );
}

window.onload = loadMapsAPI;

Blowup

Thanks! This has totally fixed my problem :D – Synectics

That should be 'addScript( 'infobox.js', initialize );' instead ;) – Peeved

@MichaelGeary The best answer ever! None of the other approaches had worked for me. Thanks ;) – Lamoreaux

Answer 2

I created this script. You can call this and add any callback function, so you have to just include this to your scripts and call

googleMapsLoadAsync(function(){ alert('google maps loaded'); });

script

var googleMapsAsyncLoaded = false;
var googleMapsAsyncCallback = function(){ };

function googleMapsLoadAsync(callback) {

    if (typeof callback !== 'undefined') { googleMapsAsyncCallback=callback; }

    if(!googleMapsAsyncLoaded) {

        $.getScript('https://maps.googleapis.com/maps/api/js?sensor=false&async=2&callback=googleMapsAsyncLoadedFunction');

    } else {

        googleMapsAsyncLoadedFunction();

    }

}

function googleMapsAsyncLoadedFunction() {

    googleMapsAsyncLoaded = true;

    if(googleMapsAsyncCallback && typeof(googleMapsAsyncCallback) === "function") {

        googleMapsAsyncCallback();

    }

    googleMapsAsyncCallback = function(){ };

}

Murtha

Answer 3

If you're using the "Legacy tag" you can append ?callback=init_maps and the init_maps function will be called after the script is ready:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=init_map">
</script>

<script>
function init_map() {
  // Do stuff with Google Maps
}
</script>

https://developers.google.com/maps/documentation/javascript/load-maps-js-api#use-legacy-tag

Narcose