KML(version 2)

by Thomas Pitera

HTML

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

CSS

html, body {
  height: 370px;
  padding: 0;
  margin: 0;
  }
#map {
 height: 500px;
 width: 100%;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 360px;
 width: 480px;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }

JavaScript

var map;
var src = 'https://raw.githubusercontent.com/piterat/kmlLink/642e292853adc55d34f4105d94cb024fac104db4/NEWYORK_SNOWLOADS.kml';


function initMap(lat,lng) {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(lat,lng),
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: true,
    map: map
  });
  kmlLayer.addListener('click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}

function codeAddress() 
{ 
	
	if (marker != null)
	{
      		marker.setMap(null);
        }

	var streetjvs = document.getElementById('street').value; 
	var cityjvs = document.getElementById('city').value; 
	var statejvs = document.getElementById('state').value; 
	var zipjvs = document.getElementById('zip').value; 

	var address = streetjvs + ' ' + cityjvs + ', ' + statejvs + ' ' + zipjvs; 

	 
	geocoder.geocode( { 'address': address}, function(results, status) {     
		if (status == google.maps.GeocoderStatus.OK) 
		{       



			map2.setCenter(results[0].geometry.location); 
			map2.setZoom(11);      
			marker = new google.maps.Marker({map: map2,position: results[0].geometry.location,draggable: false});

			clickedLocation = results[0].geometry.location;

			var latlngStr=new Array(); 

	var locationstr = String(clickedLocation);
	latlngStr = locationstr.split(',', 2);
  	var lat = latlngStr[0];
	lat = parseFloat(lat.replace("(",""));
	lat = lat.toFixed(4);
  	var lng = latlngStr[1];
	lng = parseFloat(lng.replace(")",""));
	lng = lng.toFixed(4);
	document.getElementById("coordtarget").innerHTML = 'Lat. ' + lat + '&#176; &nbsp; Lng. ' + lng + '&#176;';
		
		//	document.getElementById("snowloadtarget").innerHTML = 'Click on map at location to determine ground snow load.';
			
	   	} 
		else 
		{      ...