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
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)
.