Index: trunk/src/cptms/kmldemo1.html
===================================================================
--- trunk/src/cptms/kmldemo1.html	(revision 294)
+++ trunk/src/cptms/kmldemo1.html	(revision 294)
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+  <head>
+<!-- Launch with  python -m SimpleHTTPServer 8080  -->
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+    <meta charset="utf-8">
+    <title>KML Click Demo</title>
+    <style>
+      html, body {
+        height: 370px;
+        padding: 0;
+        margin: 0;
+        }
+      #map {
+       height: 560px;
+       width: 500px;
+       overflow: hidden;
+       float: left;
+       border: thin solid #333;
+       }
+      #cms-message {
+       height: 90px;
+       width: 250px;
+       overflow: hidden;
+       float: left;
+       background-color: #ECECFB;
+       border: thin solid #333;
+       border-left: none;
+       }
+      #userinput {
+       height: 90px;
+       width: 250px;
+       overflow: hidden;
+       float: left;
+       background-color: #ECECFB;
+       border: thin solid #333;
+       border-left: none;
+       }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <div id="cms-message"  style="display: none;"></div>
+    <div id="userinput"    style="display: none;">
+    <input id='userReply' type='text' />
+    <button onclick="handleSubmit();">Submit</button>
+    </div>
+    <script>
+    var centerPoint = {lat: 33.693385, lng: -117.798937};
+      var map;
+var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/cms_single_dyer_rd.kml";
+//      var src = "https://www.arb.ca.gov/smp/met/kml/faa.kml";
+//      var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/la_airports.kml"
+//      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
+      function initMap() {
+        map = new google.maps.Map(document.getElementById('map'), {
+          center: centerPoint,
+          zoom: 11,
+          mapTypeId: 'terrain'
+        });
+
+        var kmlLayer = new google.maps.KmlLayer(src, {
+          suppressInfoWindows: true,
+          preserveViewport: true,  // false for zoom to placemarks
+          map: map
+        });
+        kmlLayer.addListener('click', function(event) {
+          // grab description from kml file
+          var content = event.featureData.infoWindowHtml;
+          var cmsMsg = document.getElementById('cms-message');
+          cmsMsg.innerHTML = content;  // assign current msg to display
+          cmsMsg.style.display = 'block'
+          var userReply = document.getElementById('userReply');
+          userReply.value = "";  // clear the response area
+          var userInput = document.getElementById('userinput');
+          userInput.style.display = 'block'
+        });
+      }
+        function handleSubmit()
+        {
+            // hide the display
+            document.getElementById('cms-message').style.display = 'none'
+            document.getElementById('userinput').style.display = 'none'
+            // recover the user's response
+            var response = document.getElementById('userReply').value;
+            alert("Message update: " + response);
+        }
+    </script>
+    <script async defer
+    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap">
+    </script>
+  </body>
+</html>
