KML working

by Thomas Pitera

HTML

<!-- Replace the value of the key parameter with your own API key. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
<script type = "text/javascript" src="jquery-1.6.4.min.js"></script>
<table class="layout" border="0" cellpadding="0" cellspacing="1" bgcolor="#D0CBC9">
	<tr id="searchbar">
      	<td height="33" colspan="3" align="left">

	<div style="position:relative">


        <table width="75%" border="0" cellspacing="1" cellpadding="1">
            	<tr>
              	<td class="twelevept"><font color="#333333">Street:</font></td>
              	<td><input id="street" name="street" type="text" size=26></td>
              	<td class="twelevept"><font color="#000000">City:</font></td>
              	<td><input id="city" name="city" type="text" size="17"></td>
              	<td class="twelevept"><font color="#333333">State:</font></td>
              	<td><SELECT id="state" name="state" SIZE="1" class="elevenpt">
				<OPTION VALUE="NY" selected="selected">New York </option>
		</SELECT></td>
              	<td class="twelevept"><font color="#333333">Zip:</font></td>
              	<td><input id="zip" name="zip" type="text" size="5"></td>
              	<td><input name="submit" type="image" id="submit" src="images/findbutton2.png" alt="Find Address" title="GeoLocate Address" onclick="codeAddress()" style="vertical-align: middle"></td>
            	</tr>
        </table>
      
	</div>

      	</td>
    	</tr>
    
	<tr>
	<td colspan="3">
	<div id="map-canvas"></div>
	</td>
	</tr>
</table>
<table class="layout" border="0" cellspacing="5" cellpadding="5">
    	<tr>
      	<td align="center" class="tenpt">
	<div id="footermessage"><div id="elevationtarget"></div><div id="snowloadtarget"></div><div id="coordtarget"></div>&nbsp;<br><font color="#888888">* Ground snow loads derived from Figure 1608.2. Local codes and ammendments may govern,verify with local building department or...

CSS

#footermessage {
		position: relative;
	}

#elevationtarget {
		position: absolute;
		top: -90px;
		right: -3px;
		font-family:Verdana, trebuchet ms, sans-serif;
		font-size:12px;
		text-decoration:none;
 		color:#000000;
		background-color:#FBFBFB;
		font-weight:normal;
		width: 145px;
		height: 15px;
		padding-top:5px;
		padding-bottom:5px;
		padding-right:5px;
		padding-left:5px;
		text-align: center;		
		border: 1px solid #999999;		
		z-index: 5;
	    }

#coordtarget {
		position: absolute;
		top: -55px;
		right: -3px;
		font-family:Verdana, trebuchet ms, sans-serif;
		font-size:11px;
		text-decoration:none;
 		color:#000000;
		background-color:#FBFBFB;
		font-weight:normal;
		width: 200px;
		height: 15px;
		padding-top:5px;
		padding-bottom:5px;
		padding-right:5px;
		padding-left:5px;
		text-align: center;		
		border: 1px solid #999999;		
		z-index: 5;
	    }

#snowloadtarget {
		position: absolute;
		top: -93px;
		left: -3px;
		font-family:Verdana, trebuchet ms, sans-serif;
		font-size:11px;
		text-decoration:none;
 		color:#000000;
		background-color:#FBFBFB;
		font-weight:normal;
		width: 350px;
		height: 65px;
		padding-top:4px;
		padding-bottom:5px;
		padding-right:5px;
		padding-left:5px;
		text-align: left;		
		border: 1px solid #999999;		
		z-index: 4;
	    }  

#map-canvas {
		background-color:#E5E3DF;
		width: 1024px;
		height: 610px;
		background-image:url('images/PRELOADER3.gif');
		background-repeat:no-repeat;
		background-position: center center; 
	}

table.layout {
	width: 1024px;
	}

#searchbar {
		background-image: url(images/searchbarbg6.png);
		background-repeat: repeat;
	}

#tbxbar {
		background-image: url(images/searchbarbg6.png);
		background-repeat: repeat;
	}

div.pdficon {
    		position: absolute;
		z-index: 3;
		top: 4px;
		right: 4px;

	}

div.tbxicon {
    		position: absolute;
		z-index: 3;
		top: 4px;
		right: 32px;

	}




/* #### iPhone 2G, 3G, 3GS Portrait or Landscape #### */
@media only screen and (min-device-width:...

JavaScript

var src = 'https://raw.githubusercontent.com/piterat/kmlLink/642e292853adc55d34f4105d94cb024fac104db4/NEWYORK_COUNTIES.kml'
var src1 = 'https://raw.githubusercontent.com/piterat/kmlLink/642e292853adc55d34f4105d94cb024fac104db4/NEWYORK_SNOWLOADS.kml';
var elevator;
//var infowindow = new google.maps.InfoWindow();
var map2;
var geocoder;
var marker;
var clickedLocation;
var NewYorkSnowLoads;
var lat;
var lng;

function newPopup4(url) 
{
	popupWindow = window.open(url,'popUpWindow','height=600,width=1100,left=50,top=50,resizable=yes,scrollbars=yes,toolbar=no,menubar=yes,location=no,directories=no,status=yes')
}

function initialize() 
{

	geocoder = new google.maps.Geocoder(); 

  	var myLatlng = new google.maps.LatLng(42.80,-75.19);
  	var mapOptions = 
	{
    		zoom: 7,
		center: myLatlng,
      		mapTypeId: google.maps.MapTypeId.ROADMAP
  	}

  	map2 = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

	// Create an ElevationService
  	elevator = new google.maps.ElevationService();

  	// Add a listener for the click event and call getElevation on that location
  	google.maps.event.addListener(map2, 'click', getElevation);
	
	loadASCEdata();
	
	
 	
}

function loadASCEdata() 
{
	NewYorkSnowLoads = new google.maps.KmlLayer(src1,{suppressInfoWindows: true,preserveViewport: true});
  	NewYorkSnowLoads.setMap(map2);

	google.maps.event.addListener(NewYorkSnowLoads, 'click', function(kmlEvent) 
	{
		if (marker != null)
		{
      			marker.setMap(null);
       	 	}    		
		var snowloadtext = kmlEvent.featureData.description;
    var zone = kmlEvent.featureData.name;
		
    		
  		clickedLocation = kmlEvent.latLng;

		// Puts down marker at Clicked Location
		marker = new google.maps.Marker({map: map2,position: clickedLocation,draggable: false});	
	
		getElevationData1(zone,snowloadtext);

		

  	});


}

function getElevation(event) 
{

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