title: How to add Markers on Google maps v3 API asynchronously?
body: <p>I've been following the <a href="https://developers.google.com/maps/documentation/javascript/overlays?hl=en#Markers" rel="nofollow">official documentation on how to add markers</a> on the map so far</p>
  
  <p>Nevertheless, I can see only one marker at a time max. If I try to add another one, then it doesn't work (I can't even see the first one).
  My process is the following:</p>
  
  <p>I initialize gmaps api:</p>
  
  <pre><code>    jQuery(window).ready(function(){ 
          //If we click on Find me Lakes
          jQuery("#btnInit").click(initiate_geolocation);
      });
  
      function initiate_geolocation() {  
          if (navigator.geolocation)  
          {  
              var script = document.createElement("script");
              script.type = "text/javascript";
              script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBbfJJVh0jL1X9b7XFDcPuV7nHD1HlfsKs&amp;sensor=true&amp;callback=initialize";
              document.body.appendChild(script);
  
              navigator.geolocation.getCurrentPosition(handle_geolocation_query, handle_errors);
          }  
          else  
          {  
              yqlgeo.get('visitor', normalize_yql_response);
          }  
      }
  </code></pre>
  
  <p>Then, I display it on the appropriate div. But when it comes to make the AJAX call, in order to get my locations of the different markers I'd like to display, It just doesn't work properly. Here is the code with a simple map displayed (since that's the only thing working for me so far).</p>
  
  <pre><code>    function handle_geolocation_query(position){ 
  
          var mapOptions = {
              zoom: 14,
              center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
              mapTypeId: google.maps.MapTypeId.SATELLITE
            }
  
          alert('Lat: ' + position.coords.latitude + ' ' +  
                'Lon: ' + position.coords.longitude);
  
          $('#map-canvas').slideToggle('slow', function(){
              var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
          });
  
          $.when( getLakes(position.coords.latitude, position.coords.longitude)).done(function(results) {
              // InitializeGoogleMaps(results);
              if(results)
              var data = results.map(function (lake) {
                  //Check if the lake has any open swims, if not, the button will not be clickable and an alert will pop up
                  if (lake.available&gt;0)
                      clickable=true;
                  else
                      clickable=false;
  
                      return {
                          name: lake.name,
                          fishs: lake.fisheryType,
                          swims: lake.swims,
                          dist: lake.distance,
                          lat: lake.latitude,
                          long: lake.longitude,
                          id: lake.id,
                          avail: lake.available,
                          clickable: clickable,
                          route: Routing.generate('lake_display', { id:  lake.id, lat: position.coords.latitude, lng: position.coords.longitude})
                      }
                  });
  
              var template = Handlebars.compile( $('#template').html() );
              $('#list').append( template(data) );
  
  
          } );
      };
  </code></pre>
  
  <p>So I'd like to add markers after the AJAX call. I've set up a function that I should call in the when()</p>
  
  <pre><code>function InitializeGoogleMaps(results) {
  
  };
  </code></pre>
  
  <p>to display the markers in a foreach loop but nope, can't make it work. It looks like this :</p>
  
  <pre><code>CentralPark = new google.maps.LatLng(37.7699298, -122.4469157);
  marker = new google.maps.Marker({
      position: location,
      map: map
  });
  </code></pre>
  
  <p>Any help would be great !</p>
  
  <p>Thanks </p>