GeoXml3 Display Custom Field From KML File In A DIV Tag - geoxml3

Question

I am trying to get data from a custom field in the KML file to display in the div id=summary section when that KML file is selected from either the map or the sidebar. I just simply copied the sidebar html to make a summary html section and wanted the content from the KML at (Document/Folder/Placemark/summary.text) to be displayed in that div tag.
<table style="width:100%;">
<tr>
<td>
<div id="loaddiv">Loading.....    please wait!
<br />
</div>
<div id="map_canvas">
</div>
</td>
<td>
<div id="sidebar" style="width:300px;height:600px; overflow:auto"></div>
</td>
<td>
<div id="summary" style="width:300px;height:600px; overflow:auto"></div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="link"></div>
</td>
</tr>
</table>
I feel like this may require some function overrides from the geoxml3.js file. I saw a section that had the below in geoxml3.js and it seemed like there may need to be something added to pull info from the KML file.
placemark = {
name: geoXML3.nodeValue(node.getElementsByTagName('name')[0]),
description: geoXML3.nodeValue(node.getElementsByTagName('description')[0]),
styleUrl: geoXML3.nodeValue(node.getElementsByTagName('styleUrl')[0]),
id: node.getAttribute('id')
};
Website with summary table column next to the sidebar column:
https://s20.postimg.cc/6jjcrnke5/geo1.png
KML files XML view:
https://s20.postimg.cc/4eyzqkqh9/geo2.png

Answer 1

Create the below functions:
function showSummary(pm, doc) {
summaryHtml = geoXmlDoc[doc].placemarks[pm].summary;
document.getElementById("summary").innerHTML = summaryHtml;
}
function clickPoly(poly, polynum, doc) {
google.maps.event.addListener(poly, "click", function() {
showSummary(polynum, doc);
});
}
In the function useTheData(doc) add clickPoly(placemark.polygon, i, j); under the line highlightPoly(placemark.polygon, i, j); and add clickPoly(placemark.polyline, i, j); under the line highlightPoly(placemark.polyline, i, j);.
Lastly add showSummary(pm, doc); to the first line in the function kmlPlClick(pm, doc).

Answer 2

create a custom parse function for the custom tag in your KML (parses that information from the KML and populates a custom field in the object processed by geoxml3
example: http://www.geocodezip.com/geoxml3_test/votemap_address2.html)
// Custom placemark parse function
function parsePlacemark (node, placemark) {
var summaryNodes = node.getElementsByTagName('summary');
var summary = null;
if (summaryNodes && summaryNodes.length && (summaryNodes .length > 0)) {
placemark.summary = geoXML3.nodeValue(summaryNodes[0]);
}
}
add code to put that information in the <div> on a click (from #PieDev's answer):
function showSummary(pm, doc) {
summaryHtml = geoXmlDoc[doc].placemarks[pm].summary;
document.getElementById("summary").innerHTML = summaryHtml;
}
function clickPoly(poly, polynum, doc) {
google.maps.event.addListener(poly, "click", function() {
showSummary(polynum, doc);
});
}
function kmlPlClick(pm,doc) {
showSummary(pm, doc);
if (geoXmlDoc[doc].placemarks[pm].polyline.getMap()) {
google.maps.event.trigger(geoXmlDoc[doc].placemarks[pm].polyline,"click", {vertex: 0});
} else {
geoXmlDoc[doc].placemarks[pm].polyline.setMap(map);
google.maps.event.trigger(geoXmlDoc[doc].placemarks[pm].polyline,"click", {vertex: 0});
}
}
function useTheData(doc){
var currentBounds = map.getBounds();
if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
// Geodata handling goes here, using JSON properties of the doc object
sidebarHtml = '<table><tr><td>Show All</td></tr>';
geoXmlDoc = doc;
for (var j = 0; j<geoXmlDoc.length;j++) {
if (!geoXmlDoc[j] || !geoXmlDoc[j].placemarks || !geoXmlDoc[j].placemarks.length)
continue;
for (var i = 0; i < geoXmlDoc[j].placemarks.length; i++) {
var placemark = geoXmlDoc[j].placemarks[i];
if (placemark.polygon) {
if (currentBounds.intersects(placemark.polygon.bounds)) {
makeSidebarPolygonEntry(i,j);
}
var kmlStrokeColor = kmlColor(placemark.style.color);
var kmlFillColor = kmlColor(placemark.style.fillcolor);
var normalStyle = {
strokeColor: kmlStrokeColor.color,
strokeWeight: placemark.style.width,
strokeOpacity: kmlStrokeColor.opacity,
fillColor: kmlFillColor.color,
fillOpacity: kmlFillColor.opacity
};
placemark.polygon.normalStyle = normalStyle;
highlightPoly(placemark.polygon, i, j);
clickPoly(placemark.polygon, i, j);
}
if (placemark.polyline) {
if (currentBounds.intersects(placemark.polyline.bounds)) {
makeSidebarPolylineEntry(i,j);
}
var kmlStrokeColor = kmlColor(placemark.style.color);
var normalStyle = {
strokeColor: kmlStrokeColor.color,
strokeWeight: placemark.style.width,
strokeOpacity: kmlStrokeColor.opacity
};
placemark.polyline.normalStyle = normalStyle;
highlightPoly(placemark.polyline, i, j);
clickPoly(placemark.polyline, i, j);
}
if (placemark.marker) {
if (currentBounds.contains(placemark.marker.getPosition())) {
makeSidebarEntry(i,j);
}
}
}
}
sidebarHtml += "</table>";
document.getElementById("sidebar").innerHTML = sidebarHtml;
};
working example