Feeling Agile 2 The Consultants: Inverting Your Control
Jan 23

Dynamically Loading Google Maps for Performance

Google, Tech with tags: Add comments

A fellow JavaScripter was running into an issue where the standard way to load the Google Maps API was causing a perceived slow down of a single app page. The API has added the ability to get away from document.write() and dynamically load everything up.

Example code

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps?file=api&v=2.x&key=PUT-YOUR-KEY-HERE&async=2&callback=loadMap";
  document.body.appendChild(script);
}
 
function loadMap() {
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.4419, -122.1419), 6);
  map.addOverlay(new GMarker(map.getCenter()));
}

Here it is at work in an iframe below:

8 Responses to “Dynamically Loading Google Maps for Performance”

  1. Brian O'Neill Says:

    While it’s nice to get rid of document.write() and not to get away from that being a big deal. But, I think the wording of dynamically loading it up is a bit off. Maybe I’m wrong on this, but from what I can tell, basically, all this is doing is taking the javascript part of google maps and sticking it at the end of your loaded page. While perception will be that its loading faster, not sure where dynamic comes into it. But, of course, as my management tells me all the time “perception is reality”.

    Also, does the API really need to include by default google map settings for BMW, Mercedes, and TomTom navigation systems when you’re loading on a web page? Maybe the API needs an OEM tag that will include all the OEM stuff if you want it. The less javascript processing the user has to do the better IMHO.

    But, of course, what do I know :)

  2. dion Says:

    Bryan,

    The key is that in version 2.92 the API added:

    “- Addition of support for &async=2, &callback=functionName for use in dynamically loading the API”

    This allows you to do the work asynchronously and after the page paints etc.

  3. Brian O'Neill Says:

    Ok, ignore my little rant, been a long day…

    I keep forgetting that async in the AJAX world is really different then async in the networking world. Whenever I think of async, I think of network protocols doing multiple things at the same time in parallel (ie async NFS writes vs syncronous NFS writes). Where, in the AJAX world async is not necessarily being done at the same time, but independent of the main page. So, I see the async, look at the code and say “hey! where are the javascript threads processing this javascript code asynchronously with the rest of the javascript” of course we know that doesn’t happen, but I keep expecting some day to someone who magically gets threaded javascript working…

    It’s been a long day…

  4. crystian Says:

    Gracias! (thank you!)

  5. replicahandbags Says:

    thanks for your share.

  6. Hungary Says:

    What about using the google.load method? And, would google.load need to be called with a “callback” function? Thanks.

  7. dip Says:

    Thanks for this man!

  8. Jonathan Lister Says:

    @Hungary, this does work with the AJAX loader and so the google.load method now, see here:

    http://code.google.com/apis/ajax/documentation/#Dynamic

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: What is the number before 3? (just put in the digit)