Adding Multiple Markers with info windows having different text using jquery-ui-map

Question

I am working on a project where I use jquery-ui-map to add multiple markers to a map. Each marker will have different info windows with different text. But when I add them by iterating my array the same text comes to all the info windows. Could anyone please help me out with this ?. I have been pulling my hair over this.

$('#AroundMePage #map_canvas').gmap({'center': '-37.816945,144.953573', 'zoom': 12});

for (var i = 0, len = workOderLocalArray.length; i < len; ++i) {
       var workOrder =workOderLocalArray[i];

         var address = workOrder.PropertyAddress;
         var coordinates = workOrder.PropertyCoordinates;

         $('#AroundMePage #map_canvas').gmap('addMarker', { 'position':coordinates }).click(function() {
            $('#AroundMePage #map_canvas').gmap('openInfoWindow', { 'content': coordinates }, this);
          });   
  }

Answer 1

I finally figured this out. It seems I was having an issue with closure. But all the answers/fixes were showing how to solve this issue using the native javascript googl maps api,which was really lengthy solution/code, and Not the JQuery-ui-map api.

Following is My final code :

//Function Retuning the Info window click event function
   function makeInfoWindowEvent(address) {  
        return function() {  
                    $('#AroundMePage #map_canvas').gmap('openInfoWindow', { 'content': address }, this);
            };  
    } 

var workOderLocalArray = workOrdersObject.workOrderArr;


     for (var i = 0, len = workOderLocalArray.length; i < len; ++i) {
         var workOrder =workOderLocalArray[i];

         var address = workOrder.PropertyAddress;
         var coordinates = workOrder.PropertyCoordinates;

         $('#AroundMePage #map_canvas').gmap('addMarker', { 'position':coordinates }).click(makeInfoWindowEvent(address));   
     }

Hope this will be hopeful to someone in the future.Cheers ;-).