Add button to infoWindow - google-maps

Question

I am using geoxml inn order to parse kml file containing number of points. Each marker has an info window with some information. Now what I would like is to add a button to each info window and onclick I would be able to display the information in that particular infowindow in a textbox.
Now my question is how am I able to add such button that on click I will get the info of the infowindow?
The following is an image of an infowindow:
And this is the code i have done so far:
function initialize() {
var mapOptions = {
center: new google
.maps.LatLng(35.898737028438, 14.5133403246687),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
infowindow = new google.maps.InfoWindow({});
}
function displayKml() {
initialize();
parser = new geoXML3.parser({
map: map,
infoWindow: infowindow,
singleInfoWindow: true,
zoom: true,
markerOptions: { optimized: false }
});
parser.parse("Uploads/" + document.getElementById('<%= text2.ClientID %>').value);
}
The kml file
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>route</name>
<Placemark>
<name>188</name>
<description>museum</description>
<Point>
<coordinates>14.5104009086433,35.8994513796904</coordinates>
</Point>
</Placemark>
<Placemark>
<name>196</name>
<description>museum</description>
<Point>
<coordinates>14.5105859971021,35.8991906966932</coordinates>
</Point>
</Placemark>
<Placemark>
<name>349</name>
<description>museum</description>
<Point>
<coordinates>14.5126379237713,35.8969782492105</coordinates>
</Point>
</Placemark>
</Document>
</kml>

Answer 1

One way: Override the createMarker function:
function displayKml() {
geo = new geoXML3.parser({
map: map,
zoom: true,
singleInfoWindow: true,
infoWindow: infowindow,
createMarker: createMarker
});
geo.parse(document.getElementById('kmlFile').value);
}
function createMarker(placemark, doc) {
// create a Marker to the map from a placemark KML object
// Load basic marker properties
var markerOptions = {
map: map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
};
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
if (!!doc) {
// doc.markers.push(marker);
}
// Set up and create the infowindow
var infoWindowOptions = {
content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
'</h3><div>' + placemark.description + '</div>'+
'<input type="button" onclick="displayInfo(\''+placemark.name+'\',\''+placemark.description+'\');" value="populate div"></input>',
pixelOffset: new google.maps.Size(0, 2)
};
infowindow.setOptions(infoWindowOptions);
marker.infoWindowOptions = infoWindowOptions;
marker.infoWindow = infowindow;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function() {
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
placemark.marker = marker;
return marker;
}
Add a function to display the data in an external div:
function displayInfo(name,description){
document.getElementById('info').innerHTML = name+"<br>"+description;
}
working example