title: Why are loop control variable not passed at the current value to callback functions?
body: <p>I'm trying to build a map with the google maps API that loads data in JSON format and adds the points to the map.</p>
  
  <p>Here's the html page, accessible at servername.com/kmltest/mapsapi.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Google Maps javascript&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;style&gt;
        html, body, #map-canvas {
          height: 100%;
          margin: 0px;
          padding: 0px
        }
      &lt;/style&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;
      &lt;script&gt;
  
  function drawAllPoints()
      {pointsData.numLayers = pointsData.layers.length;
          for (var i = 0; i &lt; pointsData.numLayers; i++)
              {var numPoints = pointsData.layers[i].points.length;
              pointsData.layers[i].visible = true;
  
              document.getElementById("layerSidebarInner").innerHTML = document.getElementById("layerSidebarInner").innerHTML + "&lt;input type=\"checkbox\" id=\"" + pointsData.layers[i].name + "\" &gt;" + pointsData.layers[i].name + "&lt;br /&gt;";
              //Eventually, make the checkbox trigger showing and hiding
              //pointsData.layers[i].layerColor = ; //Change a point color variable for this layer?
              for (var j = 0; j &lt; numPoints; j++)
                  {// Create a Lat/Long object.
                  window.pointsData.layers[i].points[j].position = new google.maps.LatLng(window.pointsData.layers[i].points[j].lat, window.pointsData.layers[i].points[j].long);
                  // Set up each point
                  window.pointsData.layers[i].points[j].marker = new google.maps.Marker({
                      position: window.pointsData.layers[i].points[j].position,
                      map: window.map,
                      title : window.pointsData.layers[i].points[j].username
                  });
                  // Set up each information window
                  infoWindow = new google.maps.InfoWindow({
                      position: window.pointsData.layers[i].points[j].position,
                      map: window.map,
                      title: window.pointsData.layers[i].points[j].username,
                      content: 'Test '+i+", "+j
                  });
                  // Try to add a handler that shows the balloon. Why does it show "2 2" and not the array indexes?
                  google.maps.event.addListener(pointsData.layers[i].points[j].marker, 'click', function() {alert(i+" "+j);});
                  }
          }
      }
  
  
  var map;
  var marker;
  var myLatlng;
  
  function initialize() {
  
  myLatlng = new google.maps.LatLng(44.759705, -117.823371);
  var mapOptions = {
  zoom: 17,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
  
  // This used to be it's own function. Fires off a HTTP request for the Json customer data
  var pointsDataJsonhttp;
  // code for IE7+, Firefox, Chrome, Opera, Safari, I really don't care about IE6 and 5
  pointsDataJsonhttp=new XMLHttpRequest();
  pointsDataJsonhttp.onreadystatechange=function()
  {
  if (pointsDataJsonhttp.readyState==4 &amp;&amp; pointsDataJsonhttp.status==200)
      {
      window.pointsData = eval("(" + pointsDataJsonhttp.responseText + ")");
      drawAllPoints();
      }
  }
  pointsDataJsonhttp.open("GET","/kmltest/test.json",true);
  pointsDataJsonhttp.send();
  
  }
  
  //I can't seem to make this work yet, but I'm not worrying about it right now
  /*function toggleLayer(layernumber)
  {
      if (pointsData.layers[layernumber].visible) {
          pointsData.layers[layernumber] = false;
          }
      else {pointsData.layers[layernumber].visible = true;}
      numPoints = pointsData.layers[layernumber].points.length
      for (j=0; j &lt; numPoints; j++)
          {
          pointsData.layers[layernumber].points[j].setVisible(pointsData.layers[layernumber].visible);
          }
  }*/
  
  // Seems like these two do the same thing, so I'm only using one of them
  google.maps.event.addDomListener(window, 'load', initialize);
  
  //window.onload = initialize;
  
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="layerSidebar" style="width: 20%; float: left;"&gt;&lt;div id="layerSidebarInner" style="margin:10px;"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div id="map-canvas" style="width: 80%; float: left;"&gt;&lt;/div&gt;
      &lt;!-- This line makes any following content get below the bottom of the 2 columns above --&gt;
      &lt;div style="clear: both"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the (currently static) JSON that it is loading, available on the server at servername.com/kmltest/test.json:</p>
  
  <pre><code>{ "layers" :
      [
          {"name" : "Shelf18", 
          "broadband": "adsl",
          "type" : "customerlist",
          "points" :
              [ {"username" : "thompsondsl", "long" : -117.823711, "lat" : 44.760645, "shelf" : "18", "slot": "3", "port" : "2"},
              {"username": "johnsondsl", "long" : -117.822471, "lat" : 44.759705, "shelf": "18", "slot": "3", "port" : "3"}
              ]
          },
          {"name" : "Shelf17",
          "broadband": "adsl",
          "type" : "customerlist",
          "points" :
              [ {"username" : "andersendsl17", "long" : -117.823811, "lat" : 44.760645, "shelf" : "18", "slot": "4", "port" : "2"},
              {"username": "smithdsl", "long" : -117.823371, "lat" : 44.759705, "shelf": "18", "slot": "11", "port" : "3"}
              ]
          }
      ]
  }
  </code></pre>
  
  <p>As you can probably see, I've put some alert box in to try to help debug. I don't get why when I click on a placemark it give the result of "2 2" always instead of something like "0 1" depending on what placemark I click. It's as if it gets the value the loop control variable ends up with? If that is what is happing, how to I do it properly so that won't happen?</p>