title: Google Maps Asynchronously Add Markers
body: <p>I am playing around with the Google Maps API and want to load a map, then use the bounds to hit an external API to get current weather conditions for a number of cities in the map. The problem I am running into is that if I have <code>async: false</code> it works fine, but once I set <code>async: true</code> the markers no longer load. Here's what I have, I get the feeling it's something really simple.</p>
  
  <pre><code>function initialize()
  {
    var mapProp = {
      center: new google.maps.LatLng(41.8369,-95.6847),
      zoom:4,
      disableDefaultUI:true,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
  
    google.maps.event.addListener(map, 'bounds_changed', function() {
        calcBounds();
    });
  
  function calcBounds() {
    var bounds = map.getBounds();
    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();
    for (var lat = ne.lat(); lat &gt; sw.lat(); lat = lat - 5) {
      for (var long = ne.lng(); long &gt; sw.lng(); long = long - 5) {
        $.ajax({
          async: false,
          url: 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&amp;lon=' + long + '&amp;APPID=' + apikey,
          dataType: "json",
          success: function(data) {
            var marker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(lat, long),
            });//End Marker
          },//End Success
          error: function() {
           alert("ERROR");
          }
        });//End AJAX
      }//End Long for
    }//End lat For
  }//End function
  </code></pre>