title: google maps async
body: <p>I have a google maps script that I'm using that works fine declaring google maps with a script tag, but I'd like to load it asynchronously and am having trouble making the changes.  This is what I currently have:</p>
  
  <pre><code>//&lt;![CDATA[ 
  $(window).load(function(){
  var locations = [
  [
  "850 Boylston Street",
  "Chestnut Hill, MA 02467",
  "42.326435",
  "-71.149499"
  ],
  [
  "Subway Brookline Village",
  "Green Line, D",
  "42.33279",
  "-71.11630"
  ],
  [
  "Shuttle Brookline Village",
  "10 Brookline Place",
  "42.33262",
  "-71.116439"
  ],
  [
  "Subway Chestnut Hill",
  "Green Line, B",
  "42.338164",
  "-71.153164"
  ],
  [
  "Subway Cleveland Circle",
  "Green Line, C",
  "42.336145",
  "-71.149323"
  ],
  [
  "Subway Reservoir",
  "Green Line, D",
  "42.335132",
  "-71.148762"
  ],
  [
  "Bus 51 Reservoir",
  "Pick up from Subway",
  "42.335021",
  "-71.148988"
  ],
  [
  "Bus 51 Route 9",
  "Drop off Route 9",
  "42.326499",
  "-71.142588"
  ], 
  
  
  [
  "75 Francis Street",
  "Boston, MA 02115",
  "42.33619",
  "-71.10705"
  ],
  [
  "Shuttle Longwood",
  "Shapiro Building",
  "42.33603",
  "-71.10779"
  ],
  [
  "Subway Longwood",
  "Green Line, D",
  "42.34113",
  "-71.11044"
  ],
  [
  "Subway Brigham Circle",
  "Green Line, E",
  "42.33422",
  "-71.10455"
  ],
  [
  "Parking Garage",
  "70 Francis Street",
  "42.33422",
  "-71.10455"
  ],
  
  
  
  [
  "20 Patriots Place",
  "Foxboro, MA 02035",
  "42.09254",
  "-71.26629"
  ]
  ];
  
  gmarkers = [];
  
  var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 16,
  center: new google.maps.LatLng(42.326435, -71.149499),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false
  });
  
  var infowindow = new google.maps.InfoWindow();
  
  
  function createMarker(latlng, html) {
  var marker = new google.maps.Marker({
      position: latlng,
      map: map
  });
  
  google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(html);
      infowindow.open(map, marker);
  });
  return marker;
  }
  
  for (var i = 0; i &lt; locations.length; i++) {
  /*    alert("location:"+
        locations[i][0]+":"+locations[i][2]+","+locations[i][3]);
  */
  gmarkers[locations[i][0]]=
  createMarker(new google.maps.LatLng(locations[i][2], locations[i][3]), locations[i][0]     
  + "&lt;br&gt;" + locations[i][1]);
  }
  
  /*                                                    
  $(function() {
  $('#locations h3 a').each(function() { 
      $(this).on('click', function() { 
          google.maps.event.trigger(marker, 'click');    
      })    
    });    
  });
  
  */
  });//]]&gt;  
  </code></pre>