techno.blog("Dion")

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()));
}

8 Responses to “Dynamically Loading Google Maps for Performance”

1. Brian O'Neill Says:
   January 23rd, 2008 at 4:38 pm

   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:
   January 23rd, 2008 at 5:57 pm

   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:
   January 23rd, 2008 at 7:49 pm

   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:
   April 29th, 2008 at 9:53 pm

   Gracias! (thank you!)

5. replicahandbags Says:
   July 4th, 2008 at 11:58 pm

   thanks for your share.

6. Hungary Says:
   November 24th, 2008 at 10:19 am

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

7. dip Says:
   August 17th, 2009 at 3:12 pm

   Thanks for this man!

8. Jonathan Lister Says:
   October 14th, 2009 at 3:03 am

   @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