written by Britt Selvitelle

Loading Google Maps V3 Asynchronously

6 Second Summary

Async loading of Google Maps V3 REQUIRES a callback in order to operate correctly.

The Devil’s in the Details

The Google Maps V3 Loader is a strange beast, to say the least. There’s also very little documentation on how it works at the time of writing this, and that which is available is either inaccurate or incomplete.

Firstly, Google’s own example code simply doesn’t work with V3, contrary to their docs.

 function loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.google.com/maps?file=api&v=2&key=...&async=2&callback=loadMap";
      document.body.appendChild(script);
  }

This uses the http://maps.google.com/maps?file=api&v=2 entrypoint which is incompatible with V3.
The appropriate endpoint is http://maps.google.com/maps/api/js, and if you’re loading synchronously than you’re done.

If you’re loading with your fancy pants, the call REQUIRES A CALLBACK.

If you don’t pass in a callback the loader overwrites the document in its entirety.

<script
  src="http://maps.google.com/maps/api/js?sensor=false"
  type="text/javascript>
</script>

window.google = window.google || {};
google.maps = google.maps || {};
(function() {

  function getScript(src) {
    document.write('');
  }
  ...

But pass a callback (we actually use isNaN) and it appends to the body.

<script
  src="http://maps.google.com/maps/api/js?sensor=false&callback=isNaN"
  type="text/javascript>
</script>

window.google = window.google || {};
google.maps = google.maps || {};
(function() {

  function getScript(src) {
    var s = document.createElement('script');

    s.src = src;
    document.body.appendChild(s);
  }
  ...

Weird.