GeoXml3 Display Custom Field From KML File In A DIV Tag

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.....&#160;&#160;&#160; 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

1. 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]);
      }
}

2. 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><a href="javascript:showAll();">Show All</a></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