geoxml3 adding events on placemarks

Question

I am trying to add events on placemarks but getting an error 'docs is undefined'. When I try and alert the names of the placemarks, they work fine so why not the events?

var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var geoXml = new geoXML3.parser({
        map: this.map,
        singleInfoWindow:true,
                    afterParse: this.useTheData

    });  

            geoXml.parseKmlString(<my kml string>);
    google.maps.event.addListener(this.map, "bounds_changed", RefreshMap);
    google.maps.event.addListener(this.map, "center_changed", RefreshMap);
    google.maps.event.addListener(this.map, "zoom_changed", RefreshMap);

},
 useTheData: function(doc) {
  for (var i = 0; i < doc[0].placemarks.length; i++) {
  docs[0].placemarks[i].events.add("click", function () {alert("event!!");});
  //alert(docs[0].placemarks[i].name);
}
}

Answer 1

"docs" is undefined. The local version is "doc".

the .placemark is a JSON representation of the Placemark, not a google maps object that will handle click events.

It contains a reference to the google maps object (.placemark.marker for a marker) that you can add a click event listener to.

var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var geoXml = new geoXML3.parser({
        map: this.map,
        singleInfoWindow:true,
                    afterParse: this.useTheData

    });  

    geoXml.parseKmlString(<my kml string>);
    google.maps.event.addListener(this.map, "bounds_changed", RefreshMap);
    google.maps.event.addListener(this.map, "center_changed", RefreshMap);
    google.maps.event.addListener(this.map, "zoom_changed", RefreshMap);

},
  useTheData: function(doc) {
   for (var i = 0; i < doc[0].placemarks.length; i++) {
     google.maps.event.addListener(
       doc[0].placemarks[i].marker,
       "click", 
       function () {alert("event!!");
     });
   //alert(docs[0].placemarks[i].name);
   }
}