title: Displaying multiple Google Maps asynchronously
body: <p>I currently have a page which shows <strong>results</strong> of a search. When the user clicks on a result, <strong>details</strong> are fetched using ajax and loaded into the page. In these details, there is a Google map.</p>
  
  <p>Previously, I had the Gmaps script with callback in the details page. But I ran into this problem that the Gmaps script was inserted multiples times if the user clicked on several results.</p>
  
  <p>Now, I load the script in the results page and the details page calls the initialize function while passing all the necessary parameters. But I get an <code>undefined is not a function</code> error.</p>
  
  <p>So my question is: how to structure the Gmaps script, callback, and asynchronous initializing of the maps between the two pages (results, and details)?</p>
  
  <p><strong>results page</strong></p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;key=[key]"&gt;&lt;/script&gt;
  
  function initialize(params) {
  var directionsService, directionsDisplay, map;  
  
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
  
  // your typical gmaps stuff
  
  }
  </code></pre>
  
  <p><strong>details page</strong></p>
  
  <pre><code>&lt;div id="map_canvas"&gt;&lt;/div&gt;
  
  initialize(params);
  </code></pre>