title: Google Maps Adding Markers with AJAX
body: <p>SO I've read a bunch about Closure Issues, and I'm assuming that's what this is, but I'm not sure how to fix it. </p>
  
  <p><strong>The Problem:</strong> Basically, I only get 1 Marker, Which I'm assuming is because I'm using the same "marker" variable? But I'm not sure, nor do I see an easy solution to fix it. I'm sure there's something obvious and I'd love a hand from someone who actually knows Javascript, as opposed to me who just screws with it until I get the result I need. </p>
  
  <p>Thanks!</p>
  
  <pre><code>&lt;script&gt;
  var geocoder;
  var map;
  var markersArray = [];
  var plocation = [];
  
  function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(39.50, -98.35);
  var myOptions = {
      zoom: 4,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
  
  function codeAddress() {
      //Delete Existing Markers
      clearOverlays();
      deleteOverlays();
      //Geocode and Add the New One + Results.
      var address = document.getElementById("address").value;
      geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          //add the center marker
          var patientslocation =results[0].geometry.location;
          addMarker(patientslocation, "Patient");
          //Zoom in on the Region.
          map.setZoom(10);
          //Call to Our API
          $.getJSON("map/search", { provider_type: "01", loc: '"'+patientslocation+'"' },function(data) {
              //Parse Results
              var htmlstring = "";
              var arraylength = data.length-1;
              console.log("Result Count (base 0): "+arraylength)
              $(data).each(function(i,val){
  
                  //Build HTML String for Side Bar
                  if (val.name){
                      htmlstring = htmlstring + "&lt;h3&gt;"+val.name+"&lt;/h3&gt;";
                  }
                  if (val.address){
                      htmlstring = htmlstring + val.address +"&lt;br/&gt;";
                  }
                  if (val.phone){
                      htmlstring = htmlstring +val.phone +"&lt;br/&gt;";
                  }
                  //Build HTML Strings for Each Marker Hover
  
                  //Load the Array of Markers
                  plocation[i] = new google.maps.LatLng(val.lat, val.lng);
                  console.log(i +" : " +plocation[i]);
  
                  if(i === arraylength){
                      console.log("Load plocations called")
                      load_plocations();
                  }
              });
              $('#prov_list').html(htmlstring);
  
          });
  
  } else {
      alert("Geocode was not successful for the following reason: " + status);
  }
  });
  }
  
  function load_plocations(){
      $(plocation).each(function(k,v){
          console.log("Calling AddMarker: "+v)
          addMarker(v,k);
      });
  }
  
  function addMarker(location, name) {
     console.log("Adding Marker: "+location)
      marker = new google.maps.Marker({
          position: location,
          map: map
      });
      markersArray.push(marker);
  }
  //Clears the Markers from the map.
  function clearOverlays() {
      console.log("Clearing Overlays");
      if (markersArray) {
          for (i in markersArray) {
              markersArray[i].setMap(null);
          }
      }
  }
  
  // Deletes all markers in the array by removing references to them
  function deleteOverlays() {
      console.log("Deleting Overlays");
      if (markersArray) {
          for (i in markersArray) {
              markersArray[i].setMap(null);
          }
          markersArray.length = 0;
      }
  }
  </code></pre>
  
  <p></p>