title: Problem with loading google map v3 asynchronously
body: <p>My current solution for loading Google map scripts, is the old fashion way.</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>But this takes to long and rendering content is delayed. Then I looked at the <a href="http://code.google.com/intl/no/apis/maps/documentation/javascript/basics.html#HTTPS" rel="nofollow">Google Map Documentation</a> and discovered how one can load the Goole Map javascripts asynchronously.</p>
  
  <p>So I tested this in the javascript I'm already using. This is just snippets of my script.</p>
  
  <pre><code>jQuery(document).ready(function() {
    googleMaploadScript();
    someFunction();
  }
  
  // Script for loading googlemap with callback to initialize Google map
  function googleMaploadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=true&amp;callback=initGoogleMap";
    document.body.appendChild(script);
  }
  
  // Some function that calls populateGeoMap()
  function someFunction() {
  (...)
  populateGeoMap(); 
  }
  
  // Script for populating google map with locations
  function populateGeoMap() {
    // This is where I initialized google map each time I load the page using google map
    // But since I'm using a callback, I've commented this out.
    //initGoogleMap(); 
    var lat = '12.142123';
    var lng = '54.524522';
    latLng  = new google.maps.LatLng(lat,lng); &lt;-- THIS FAILS
  }
  
  // Google map init
  function initGoogleMap() {
      alert('test'); &lt;-- THIS ALERT IS NEVER TRIGGERED
  
      options           = {zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }    
      map               = new google.maps.Map(document.getElementById("map_canvas"), options);
      geocoder          = new google.maps.Geocoder();
      icon              = new google.maps.MarkerImage("http://mysite.com/img/pin_red.png", null, null, null, new google.maps.Size(32, 32));    
      bounds            = new google.maps.LatLngBounds();  
  }
  </code></pre>
  
  <p>My script fails at <code>new google.maps.LatLng(lat,lng);</code> and this is because <code>initGoogleMap()</code> has not been run.</p>
  
  <p>It seems that the callback in the <code>script.src</code> did not work - because my alert is never fired. Or it might be because things are not laoded in the correct order, but still, the alert should have been triggered.</p>
  
  <p>Does anyone have experience with this?</p>