Question

I am trying to create listeners for some map markers. I can create the markers and they are on the map but, no matter which marker I click on it tells me "Uncaught TypeError: Cannot call method 'open' of undefined" . When I break at the open code it is showing markers[46] which is one more that the highest index. And it doesnt matter which marker I click on its always the same index.

EDIT: I edited the code and pasted all of it. No errors, but nothing happens when I click a marker. I am looking in Chrome and it looks like there isnt a event handler registered

<script>
var map;
var nav = [];
$(document).ready(function () {
    //initialise a map
    init();
    var infowindow = new google.maps.InfoWindow({});
    $.get("xxxxxx.kml", function (data) {
        html = "";
        //loop through placemarks tags                    
        i = 1;
        $(data).find("Placemark").each(function (index, value) {
            //get coordinates and place name
            coords = $(this).find("coordinates").text();
            contentString = $(this).find("description").text();


            var partsOfStr = coords.split(',');
            var lat = parseFloat(partsOfStr[0]);
            var lng = parseFloat(partsOfStr[1]);
            var myLatLng = new google.maps.LatLng(lng, lat);
            place = $(this).find("name").text();

            createMarker(myLatLng, place, contentString, i)

            //store as JSON
            c = coords.split(",")
            nav.push({
                "place": place,
                "lat": c[0],
                "lng": c[1]
            })
            //output as a navigation
            html += "<li>" + place + "</li>";
            i++;
        });
        //output as a navigation
        $(".navigation").append(html);

        //bind clicks on your navigation to scroll to a placemark

        $(".navigation li").bind("click", function () {

            panToPoint = new google.maps.LatLng(nav[$(this).index()].lng, nav[$(this).index()].lat)

            map.panTo(panToPoint);
        })

    });
    markers = [];

    function createMarker(myLatLng, title, contentString, i) {
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: title
        });

        google.maps.event.addListener(markers, 'click', function () {
            infoWindow.setContent(contentString);
            infowindow.open(map, markers[i]);
        });
        markers[i] = marker;
        return marker
    }

    function init() {

        //google.maps.event.addDomListener(window, 'init', Initialize);
        var latlng = new google.maps.LatLng(39.047050, -77.131409);
        var myOptions = {
            zoom: 4,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP

        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);


    }


})

Answer 1

This is almost a FAQ. When your loop ends, the value of i is 46 (based on your statement). There is no marker 46, so all the click listeners fail. It can be solved with function closure (a createMarker function which holds the association between the marker and the infowindow contents).

Something like this in your example (not tested), call it from inside your marker creation loop, requires a global markers array, but doesn’t require the global infowindow array:

//global markers array
markers = [];
// global infowindow
var infowindow = new google.maps.InfoWindow({});

// createMarker function
function createMarker(myLatLng, title, contentString, i)
{
    var marker = new google.maps.Marker({
    position: myLatlng , 
    map: map, 
    title:title
 });

  google.maps.event.addListener(markers, 'click', function() {
    infoWindow.setContent(contentString);
    infowindow.open(map,markers[i]);
  });
  markers[i] = marker;
  return marker
}