adding an event listener that operates with Google Maps infowindow

Question

For the longest time I have not been able to add event listener in the links in the wineries AZ section for my website (the green button above the map):

http://www.michiganwinetrail.com/

The problem is that I have previously created a loop that is pretty complicated

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

    locations[i][0] = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        title: locations[i][3],
        map: map,
        content: locations[i][4]
    });

    var infowindow = new google.maps.InfoWindow({});

    google.maps.event.addListener(locations[i][0], 'click', function () {
        infowindow.setContent(this.content);
        infowindow.open(map, this);
    });

}

What do i need to add to this loop that will allow my my infowindows to pop up when I click the links in the wineries AZ section? I would like to stay away from jquery if at all possible

Answer 1

Make a unique ID for your locations in the locations Array like this:

var locations[0] = ['twoLads',44.932317,-85.492437, '2 Lads', twoLads_content];
var locations[1] =  ['belLago',44.8529,-85.7663, 'Bel Lago', belLago_content];
//etc...

Now you can add a click listener to each "Map It!" link like this:

<tr class="rowClass">
<td>Bel Lago</td>
<td><a href="http://bellago.com/">Visit Website</a></td>
<td class="mapIt"><a onclick="openMarker(1);">Map It!</a></td>
</tr>

Then you can define a function to handle the opening of the infoWindow.

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

locations[i][0] = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    title: locations[i][3],
    map: map,
    content: locations[i][4]
});

var infowindow = new google.maps.InfoWindow({});

google.maps.event.addListener(locations[i][0], 'click', function () {
    infowindow.setContent(this.content);
    infowindow.open(map, this);
});

}

window.openMarker = function(locationId){
    // Set content according to the locationId
    infowindow.setContent(locations[locationId][4]);
    // Open the infowindow at the location of the appropriate marker which gets stored in array key 0 in your loop above.
    infowindow.open(map, locations[locationId][0]);
}