Question

Im probably doing something dumb here but I can’t figure out why both of my markers end up with the same title. Both markers end up with the correct location from the geocoder and are displayed in separate places.

Before render

function gMapInitialize() {

  var myLocs = [<ui:repeat value = "#{LocationBean.locations.address}" var = "loc"       varStatus = "loop">
                   [ "#{loc.name}","#{loc.street}","#{loc.city}","#{loc.state}", "#{loc.zipCode}"]#{!loop.last ? ',' : ''}
                   </ui:repeat>];
   //<![CDATA[                
     var myOptions = {
      center: new google.maps.LatLng(37.212832,-76.750488),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var geocoder = new google.maps.Geocoder();

    for(var i = 0; i < myLocs.length; i++){
    var myLoc = myLocs[i];
    var geoOptions = {
    address: myLoc[1] + "," + myLoc[2] + "," + myLoc[3] + "," + myLoc[4],

    }
    geocoder.geocode( geoOptions ,function(results, status){

    if(status == google.maps.GeocoderStatus.OK){
    var marker = new google.maps.Marker({
    map: map,
    position: results[0].geometry.location,
    title: myLoc[0],
    zIndex: i
    });


    }
    });               


  }
  }
 // ]]>

After Render:

function gMapInitialize() {

  var myLocs = [
                   [ "Richmond","9 North 3rd Street","Richmond","VA", "23219"],

                   [ "Hampton Roads","632 North Witchduck Road","Virginia Beach","VA", "23462"]
                   ];
   //<![CDATA[                
     var myOptions = {
      center: new google.maps.LatLng(37.212832,-76.750488),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var geocoder = new google.maps.Geocoder();

    for(var i = 0; i < myLocs.length; i++){
    var myLoc = myLocs[i];
    var geoOptions = {
    address: myLoc[1] + "," + myLoc[2] + "," + myLoc[3] + "," + myLoc[4],

    }
    geocoder.geocode( geoOptions ,function(results, status){

    if(status == google.maps.GeocoderStatus.OK){
    var marker = new google.maps.Marker({
    map: map,
    position: results[0].geometry.location,
    title: myLoc[0],
    zIndex: i
    });


    }
    });               


  }
  }
 // ]]>

Am I trying to do too much in one loop? I keep hearing something about closure but am new to javascript and know nothing about it.

Ohh yeah: I get the second of the two names on each marker. The markers are in the right position but both are titled “Hampton Roads”. So, the right info is being passed to the title, but its as if title of the first is being overwritten with the title of the second.

UPDATE Well, I fixed it and I think I understand a bit more about closure. So mainly the loop keeps looping and by the time the function is called its already at the end. So even in the below, each marker will probably have the same zIndex and I should pass the “i” as well.

for(var i = 0; i < myLocs.length; i++){

    var myLoc = myLocs[i];
    var geoOptions = {
    address: myLoc[1] + "," + myLoc[2] + "," + myLoc[3] + "," + myLoc[4],

    }

    geocoder.geocode( geoOptions ,addMarkers(myLoc[0]));
    }

    function addMarkers(myTitle){
     return function(results,status){
    if(status == google.maps.GeocoderStatus.OK){
    var marker = new google.maps.Marker({
    map: map,
    position: results[0].geometry.location,
    title: myTitle,
    zIndex: i
    });


    }
    };



  }

Answer 1

It’s a simple closure issue. myLoc[i] refers to the same entity after the loop ends in both cases. Just wrap it in a function to create a new scope:

   for(var i = 0; i < myLocs.length; i++){
    (function(num) {
    var myLoc = myLocs[num];
    var geoOptions = {
    address: myLoc[1] + "," + myLoc[2] + "," + myLoc[3] + "," + myLoc[4],

    }
    geocoder.geocode( geoOptions ,function(results, status){

    if(status == google.maps.GeocoderStatus.OK){
    var marker = new google.maps.Marker({
    map: map,
    position: results[0].geometry.location,
    title: myLoc[0],
    zIndex: num
    });
    }(i));
    }