title: Google maps API map - initialise script in body not head, map not appearing
body: <p>I am trying to add a google map to a page which is pre-defined and protected, so I can only add code to the body section. I've put the script at the bottom of the page and used the code for asynchronous loading from google's tutorial but, well, my div remains sadly empty. I suspect the API is not loading but have no clue how to check that. Any ideas please?</p>
  
  <p>Thanks!</p>
  
  <pre><code>&lt;div id="map_canvas" style="width: 650px; height: 350px;"&gt;
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
  function initialize() {
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  }
  
  function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDOtp_8dtVzG4kEJEzLw7E5bC187DagTRg&amp;sensor=FALSE&amp;callback=initialize";
  }
  
  window.onload = function(){loadScript();};
  
  &lt;/script&gt;
  </code></pre>