Google AJAX API Loader

Question

I am having a problem loading the Google AJAX APIs in response to user input instead of when the page loads.

This works:

<script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
<script type="text/javascript">
    google.load("search", "1");
    google.setOnLoadCallback(function() { alert("loaded"); });
</script>

But this doesn't:

<script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
<script type="text/javascript">
    function clicked() {
        google.load("search", "1");
        google.setOnLoadCallback(function() { alert("loaded"); });
    }
</script>

The clicked function is a handler for a simple link.

Does anyone know why?

Answer 1

Based on the IE Response, it may be the case that the Google AJAX APIs haven't loaded by the time you click the button, therefore the "google" object is undefined.

Try this (http://code.google.com/apis/ajax/documentation/):

function mapsLoaded() {
  var map = new google.maps.Map2(document.getElementById("map"));
  map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}

function loadMaps() {
  google.load("maps", "2", {"callback" : mapsLoaded});
}

function initLoader() {
  var script = document.createElement("script");
  script.src = "http://www.google.com/jsapi?key=ABCDEFG&callback=loadMaps";
  script.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(script);
}