title: Loading Google Maps API with Ajax using Javascript/JQuery, Callback not setup correctly
body: <p>I would appreciate some guidance on getting this script to work. The map loads fine but the Callback isn't setup correctly so the page keeps appending the Google maps API script to the document each time the button is clicked.</p>
  
  <p>I am using JQuery's $.load to add an HTML page (map.html) into a DOM element (a div container).</p>
  
  <pre><code>$('.button').click(function() {
          $('#mapcontainer').load('/map.html');
  }); 
  </code></pre>
  
  <p>Here is what map.html is using to load the map, the script I'm using originated from here: <a href="https://stackoverflow.com/a/12602845/1607449">https://stackoverflow.com/a/12602845/1607449</a></p>
  
  <pre><code>&lt;script&gt;
  
  var gMapsLoaded = false;
  window.gMapsCallback = function(){
  gMapsLoaded = true;
  $(window).trigger('gMapsLoaded');}
  
  window.loadGoogleMaps = function(){
  if(gMapsLoaded) return window.gMapsCallback();
  var script_tag = document.createElement('script');
  script_tag.setAttribute("type","text/javascript");
  script_tag.setAttribute("src","http://maps.google.com/maps/api/js?key=KEYGOESHERE&amp;sensor=false&amp;callback=gMapsCallback");
  (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
  }
  
  $(document).ready(function(){
  
     function initialize(){
  
  var mapOptions = {
  
    }
  };
  
  map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
  }
  
  $(window).bind('gMapsLoaded', initialize);
  window.loadGoogleMaps();
  });
  
  &lt;/script&gt;
  
  &lt;div style="height:400px;width:650px;" id="map_canvas"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here's another example of a different way to setup a callback for dynamically loading the Google Maps Javascript API: <a href="http://www.vijayjoshi.org/2010/01/19/how-to-dynamically-load-the-google-maps-javascript-api-on-demand-loading/" rel="nofollow noreferrer">http://www.vijayjoshi.org/2010/01/19/how-to-dynamically-load-the-google-maps-javascript-api-on-demand-loading/</a> This is what I am hoping to accomplish by modifying the script I'm currently using (as opposed to back-engineering a new script).</p>
  
  <p>Thanks.</p>
  
  <p>Edit: Solved the issue, solution posted in response below</p>