Question

I have the same event listener for many markers in my Javascript. How do I differentiate between different markers in this listener? I want to display another marker elsewhere on clicking of a particular marker. Every marker has another marker which I display on clicking on it.

The event listener code:

google.maps.event.addListener(marker, 'click', function() {
//code goes here

});

More detail:

I have two arrays markers1 and markers2 each having 10 markers. I display the 10 from markers1 on my map. On clicking markers1[0] marker I want to display the markers2[0] marker on the map. How do I know in the event listener that I have clicked on markers1[0], now I know that I can use the THIS for identifying markers1[0] but how do I know in the listener that it was the marker at the position 0 in array markers1 so that I could also display marker at position 0 in array markers2?

Answer 1

You can easily add the index (or any other information) to each Marker:

for( var i = 0; i < arrDestinations; i += 1 ) {
    var marker = new google.maps.Marker({
        title: arrDestinations[i].title,
        position: new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lon),
        map: map,
        myIndex: i    // ADDED FIELD: Each marker contains its index
    )};
    bindInfoWindow(marker,map,infowindow,"<p>arrDestinations[i].description + "</p>");
}

Then in your event handler you can do this:

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(html);
    infowindow.open(map, marker);
    setVisibility(marker);  // ADDED
});

The setVisibility function would be similar to the one suggested by 150PoundsOfDonamite above, except that you know the index of the marker that you want to make visible:

function setVisible(marker) {
    for(var i=0; i<markers1.length; i++) {
        if(i==marker.myIndex) {
            markers2[i].setVisible(true);
        } else {
            markers2[i].setVisible(false);
        }
    }
}