dist/samples/layer-kml-features/inline.html

<!DOCTYPE html>
<html>
  <head>
    <title>KML Feature Details</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/css">
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #map {
        float: left;
        height: 425px;
        width: 79%;
      }

      #content-window {
        float: left;
        font-family: "Roboto", "sans-serif";
        height: 100%;
        line-height: 30px;
        padding-left: 10px;
        width: 19%;
      }
    </style>
    <script>
      "use strict";

      function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 12,
          center: {
            lat: 37.06,
            lng: -95.68,
          },
        });
        const kmlLayer = new google.maps.KmlLayer({
          url:
            "http://googlemaps.github.io/kml-samples/kml/Placemark/placemark.kml",
          suppressInfoWindows: true,
          map: map,
        });
        kmlLayer.addListener("click", (kmlEvent) => {
          const text = kmlEvent.featureData.description;
          showInContentWindow(text);
        });

        function showInContentWindow(text) {
          const sidediv = document.getElementById("content-window");
          sidediv.innerHTML = text;
        }
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="content-window"></div>
  </body>
</html>