0

I am facing a problem and I'm not sure how to face it.

I have an array (a set of records from a database) and a loop to go through the array. In the loop I am creating marker objects with the Google Maps api. Markers take a key value pairs set with various info (position, associated map etc). It also has a title, which I would like to assign a specific text to containing information specific to that marker. However as I loop through the code, it seems that I always end up with the the same string being referenced by all the markers (i.e. only one title message is ever displayed on click and it is only relevant to a single marker though it appears on all markers.

My code is:

   for (record = 0; record < numRecords; record++){

        zomLat =parseFloat(data[record][1]);
        zomLng = parseFloat(data[record][2]);
        posterName = data[record][3];
        headline = data[record][7];
        details = data[record][8];
        type = data[record][4];
        num = data[record][5];
        timePosted = data[record][6];
        mapLabel = data[record][9];     //this is the key info I'd like added to each marker
        //creates a position object for the marker
        zomLATLNG = getCustomLatLng(Lat,Lng);


        marker = new google.maps.Marker(

                                   {
                                   position: zomLATLNG,
                                   map: window.map,
                                   icon: window.Icon,
                                   draggable:true,
                                   title://How can I add a unique string here?
                                   });


   //and add a click listener
   google.maps.event.addListener(marker, 'click', function()
                                 {
                                 alert(marker.title);

                                 });

   window.zomMarkers.push(marker);

   }

What I think I need to do is during each loop, crete a new and independent string object (essentially a copy of the mapLabel object defined by data[record][0]. However after many hours trying, I can't seem to get it right.

Thanks a lot in advance for any ideas or help.

user3535074
  • 1,268
  • 8
  • 26
  • 48

1 Answers1

0

As the incredibly helpful Dr.Molle suggested, using this.title instead of marker.title solved the issue. I used the mapLabel variable directly when assigning the 'title' key to the marker options.

Final code here (thanks a lot Dr.Molle!):

 for (record = 0; record < numRecords; record++){

        zomLat =parseFloat(data[record][1]);
        zomLng = parseFloat(data[record][2]);
        posterName = data[record][3];
        headline = data[record][7];
        details = data[record][8];
        type = data[record][4];
        num = data[record][5];
        timePosted = data[record][6];
        mapLabel = data[record][9];     //this is the key info I'd like added to each marker
        //creates a position object for the marker
        zomLATLNG = getCustomLatLng(Lat,Lng);


        marker = new google.maps.Marker(

                                   {
                                   position: zomLATLNG,
                                   map: window.map,
                                   icon: window.Icon,
                                   draggable:true,
                                   title:mapLabel
                                   });


   //and add a click listener
   google.maps.event.addListener(marker, 'click', function()
                                 {
                                 alert(this.title);

                                 });

   window.zomMarkers.push(marker);

   }
user3535074
  • 1,268
  • 8
  • 26
  • 48