Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pass parameter to callback function

My code

// do ajax request and get JSON response

for (var i = 0; i < data.results.length; i++) {  
    result = data.results[i];
    // do stuff and create google maps marker    
    marker = new google.maps.Marker({  
        position: new google.maps.LatLng(result.lat, result.lng),   
        map: map,  
        id: result.id  
    });  
    google.maps.event.addListener(marker, 'click', function() {  
        createWindow(marker.id); //<==== this doesn't work because marker always points to the last results when this function is called
    });  

}

How to solve this?

like image 521
Derk Avatar asked Nov 02 '09 19:11

Derk


4 Answers

The classic closure problem strikes again!

  google.maps.event.addListener(marker, 'click', function(id) {
    return function(){
      createWindow(id); //<==== this doesn't work because marker always points to the last results when this function is called
    }
  }(marker.id));     
like image 20
Peter Bailey Avatar answered Nov 07 '22 05:11

Peter Bailey


Try this:

with ({ mark: marker }) {
    google.maps.event.addListener(mark, 'click', function() {  
        createWindow(mark.id);
    });
}

An example that demonstrates the use of with:

for (var i = 0; i < 10; i++) {
    setTimeout(function() { console.log(i); }, 1000);
}

The above will log 10 ten times.

for (var i = 0; i < 10; i++) {
    with ({ foo: i }) {
        setTimeout(function() { console.log(foo); }, 1000);
    }
}

This will log 0 to 9, as desired, thanks to with introducing a new scope.

JavaScript 1.7 has a let statement that is nicer, but until that is widely supported, you can use with.

And use var for your variables.

like image 58
nlogax Avatar answered Nov 07 '22 05:11

nlogax


Looks like you've got a closure problem. See these questions:

  • google maps api all markers opening the same infowindow
  • google maps trouble closures passing by reference
  • dynamically adding listeners to google maps markers
like image 29
Chris B Avatar answered Nov 07 '22 04:11

Chris B


try this one

var marker = new Array();
for (var i = 0; i < data.results.length; i++) {  
    result = data.results[i];
    // do stuff and create google maps marker    
    marker[i] = new google.maps.Marker({  
        position: new google.maps.LatLng(result.lat, result.lng),   
        map: map,  
        id: result.id  
    });  
    google.maps.event.addListener(marker[i], 'click', example(marker[i].id));  

}

create new function

function example(my_window){
    return function(){
        createWindow(my_window);
    }
}
like image 1
Wilianto Indrawan Avatar answered Nov 07 '22 06:11

Wilianto Indrawan