| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <!-- Launch with python -m SimpleHTTPServer 8080 --> |
|---|
| 5 | <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> |
|---|
| 6 | <meta charset="utf-8"> |
|---|
| 7 | <title>KML Click Demo</title> |
|---|
| 8 | <style> |
|---|
| 9 | html, body { |
|---|
| 10 | height: 370px; |
|---|
| 11 | padding: 0; |
|---|
| 12 | margin: 0; |
|---|
| 13 | } |
|---|
| 14 | #map { |
|---|
| 15 | height: 560px; |
|---|
| 16 | width: 500px; |
|---|
| 17 | overflow: hidden; |
|---|
| 18 | float: left; |
|---|
| 19 | border: thin solid #333; |
|---|
| 20 | } |
|---|
| 21 | #cms-message { |
|---|
| 22 | height: 90px; |
|---|
| 23 | width: 250px; |
|---|
| 24 | overflow: hidden; |
|---|
| 25 | float: left; |
|---|
| 26 | background-color: #ECECFB; |
|---|
| 27 | border: thin solid #333; |
|---|
| 28 | border-left: none; |
|---|
| 29 | } |
|---|
| 30 | #userinput { |
|---|
| 31 | height: 90px; |
|---|
| 32 | width: 250px; |
|---|
| 33 | overflow: hidden; |
|---|
| 34 | float: left; |
|---|
| 35 | background-color: #ECECFB; |
|---|
| 36 | border: thin solid #333; |
|---|
| 37 | border-left: none; |
|---|
| 38 | } |
|---|
| 39 | </style> |
|---|
| 40 | </head> |
|---|
| 41 | <body> |
|---|
| 42 | <div id="map"></div> |
|---|
| 43 | <div id="cms-message" style="display: none;"></div> |
|---|
| 44 | <div id="userinput" style="display: none;"> |
|---|
| 45 | <input id='userReply' type='text' /> |
|---|
| 46 | <button onclick="handleSubmit();">Submit</button> |
|---|
| 47 | </div> |
|---|
| 48 | <script> |
|---|
| 49 | var centerPoint = {lat: 33.693385, lng: -117.798937}; |
|---|
| 50 | var map; |
|---|
| 51 | var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/cms_single_dyer_rd.kml"; |
|---|
| 52 | // var src = "https://www.arb.ca.gov/smp/met/kml/faa.kml"; |
|---|
| 53 | // var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/la_airports.kml" |
|---|
| 54 | // var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml'; |
|---|
| 55 | function initMap() { |
|---|
| 56 | map = new google.maps.Map(document.getElementById('map'), { |
|---|
| 57 | center: centerPoint, |
|---|
| 58 | zoom: 11, |
|---|
| 59 | mapTypeId: 'terrain' |
|---|
| 60 | }); |
|---|
| 61 | |
|---|
| 62 | var kmlLayer = new google.maps.KmlLayer(src, { |
|---|
| 63 | suppressInfoWindows: true, |
|---|
| 64 | preserveViewport: true, // false for zoom to placemarks |
|---|
| 65 | map: map |
|---|
| 66 | }); |
|---|
| 67 | kmlLayer.addListener('click', function(event) { |
|---|
| 68 | // grab description from kml file |
|---|
| 69 | var content = event.featureData.infoWindowHtml; |
|---|
| 70 | var cmsMsg = document.getElementById('cms-message'); |
|---|
| 71 | cmsMsg.innerHTML = content; // assign current msg to display |
|---|
| 72 | cmsMsg.style.display = 'block' |
|---|
| 73 | var userReply = document.getElementById('userReply'); |
|---|
| 74 | userReply.value = ""; // clear the response area |
|---|
| 75 | var userInput = document.getElementById('userinput'); |
|---|
| 76 | userInput.style.display = 'block' |
|---|
| 77 | }); |
|---|
| 78 | } |
|---|
| 79 | function handleSubmit() |
|---|
| 80 | { |
|---|
| 81 | // hide the display |
|---|
| 82 | document.getElementById('cms-message').style.display = 'none' |
|---|
| 83 | document.getElementById('userinput').style.display = 'none' |
|---|
| 84 | // recover the user's response |
|---|
| 85 | var response = document.getElementById('userReply').value; |
|---|
| 86 | alert("Message update: " + response); |
|---|
| 87 | } |
|---|
| 88 | </script> |
|---|
| 89 | <script async defer |
|---|
| 90 | src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap"> |
|---|
| 91 | </script> |
|---|
| 92 | </body> |
|---|
| 93 | </html> |
|---|
