KML - #1

by timcam3000

HTML

<div id="map"></div>
<div id="capture"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS

html, body {
  height: auto;
  padding: 0;
  margin: 0;
  }
#map {
 height: 66vh;
 width: 100%;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 34vh;
 width: 100%;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }

JavaScript

var map;
var srcs = [
  'https://bluegrassengineering.net/wp-content/uploads/kml/Unknown-KV.kml',
  'https://bluegrassengineering.net/wp-content/uploads/kml/GRR-KV2.kml',
  'https://bluegrassengineering.net/wp-content/uploads/kml/Non-Lead-KV.kml'
];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });

  srcs.forEach(function(src) {
    var kmlLayer = new google.maps.KmlLayer(src, {
      suppressInfoWindows: true,
      preserveViewport: false,
      map: map
    });

    kmlLayer.addListener('click', function(event) {
      var content = event.featureData.infoWindowHtml;
      var testimonial = document.getElementById('capture');
      testimonial.innerHTML = content;
    });
  });
}