MyKml

by Thomas Pitera

HTML

<!-- 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>
<script type = "text/javascript" src="jquery-1.6.4.min.js"></script>
<table class="layout" border="0" cellpadding="0" cellspacing="1" bgcolor="#D0CBC9">
    	<tr>
      	<td colspan="3" align="center" bgcolor="#FFFFFF" class="usernotes">Use our <strong>New York Ground Snow Loads</strong> map to easily determine the ground snow load (2010 Building Code of New York State: Chapter 16 Section 1608) for any location in the State of New York.  You can click on the map below to find the design ground snow load for that location.<br>
	<br>
	The ground snow loads to be used in determining the design snow loads for roofs shall be determined in accordance with ASCE 7-10 or <a href="http://publicecodes.cyberregs.com/st/ny/st/b200v10/st_ny_st_b200v10_16_sec008.htm" target="_blank">Figure 1608.2</a>. When using Figure 1608.2 for sites at elevations above 1,000 feet (304 m), the ground snow load shall be increased from the mapped value by 2 psf (0.095 kN/m<span class="ninept">2</span>) for every 100 feet (30.48 m) above 1,000 feet (304 m). Site-specific case studies may be made in lieu of snow loads in Figure 1608.2 or ASCE 7-10.
	</td>
    	</tr>
    
	

	<tr id="searchbar">
      	<td height="33" colspan="3" align="center">

	<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"...

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 src2 = '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 NewYorkCounties;
var NewYorkSnowLoads;
var mdktbxcookie;

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() 
{
	NewYorkCounties = new google.maps.KmlLayer(src,{suppressInfoWindows: true,preserveViewport: true});
  	NewYorkCounties.setMap(map2);

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

	

	google.maps.event.addListener(NewYorkCounties, 'click', function(kmlEvent) 
	{
		if (marker != null)
		{
      			marker.setMap(null);
       	 	}    		

		var snowloadtext = kmlEvent.featureData.description;
		var countyname = kmlEvent.featureData.name;
		
    		
  		clickedLocation = kmlEvent.latLng;

		// Puts down marker at Clicked Location
		marker = new google.maps.Marker({map: map2,position: clickedLocation,draggable:...