csessig86 · February 6, 2012 19:57
diff --git a/national_register b/national_register
 ## View online: http://wcfcourier.com/app/special/national_register/

 <html> 
 <head> 
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 

 <title>WCFCourier.com - Historic places in Eastern Iowa</title> 

 <style>
 body { font-family: Arial, sans-serif; }

 #search {
  	font-family: Arial, sans-serif;}

 #map_canvas {
 	border: 1px solid #999999;
 	height: 565px;
 	width:700px;
 }
  
 #legend {
    width:225px;
    background-color:#FFFFFF;
    padding:10px;
    font-family: Arial, sans-serif;
    font-size:14px;
    border: 1px solid #999999;
    line-height:1.3em;
 }

 #legend h1 {font-size:18px; margin:0 0 4px 0; text-align: center;}
 #legend h2 {font-size:14px; margin:0;}
 #legend h3 {font-size:13px; margin: 10px 0 0 0;}

 #legend .colors {float:left;line-height:23px; width:150px; margin: 10px 0; font-weight: bold;}
 #legend .colors span {height:20px; width:20px; margin-right:5px; display:block; float:left; clear:left;}
 #legend .one {background-color: #2b8cbe; border: 1px solid #000000;}
 #legend .two {background-color: #7bccc4; border: 1px solid #000000;}
 #legend .three {background-color: #bae4bc; border: 1px solid #000000;}
 #legend .four {background-color: #f0f9e8; border: 1px solid #000000;}

 #legend p {clear:both; margin:5px 0 0 0;}

 </style>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

 <!-- INCLUDE THIS SCRIPT REFERENCE FOR MOUSEOVER -->
 <script type="text/javascript" src="fusiontips.js"></script>

 <script type="text/javascript" id="script">
 var map;
 var layer;
 var geocoder = new google.maps.Geocoder();

 function loadmap() {
 	layer2 = new google.maps.FusionTablesLayer({
 		query: {
 			select: 'geometry',
 			from: 2814002
 		},
 		suppressInfoWindows: true
 	});
 	layer2.setMap(map);
 	
 	layer3 = new google.maps.FusionTablesLayer({
 		query: {
 			select: 'geometry',
 			from: 2824727
 		},
 		suppressInfoWindows: true
 	});
 	layer3.setMap(map);
 	
 	layer = new google.maps.FusionTablesLayer({
 		query: {
 			select: 'Mappable_location',
 			from: 2813443
 		},
 		suppressInfoWindows: true,
 		styles: [{
 			markerOptions: {
 				iconName: "small_blue"
 			}
 		}]
 	});
 	layer.setMap(map);
 		
 	// Enables rollover
 	layer.enableMapTips({
 		select: "'Name', 'Location', 'City', 'Significance'",
 		from: 2813443,
 		geometryColumn: 'Mappable_location',
 		suppressMapTips: false,
 		delay: 1,
 		tolerance: 8
 	});
 }

 function zoomtoaddress() {

  // Use the geocoder to geocode the address
  geocoder.geocode( { 'address': document.getElementById("address").value }, function(results, status) {
    // If the status of the geocode is OK
    if (status == google.maps.GeocoderStatus.OK) {
      // Change the center and zoom of the map
      map.setCenter(results[0].geometry.location);
      map.setZoom(12);
    } 
  });
 }

 // Register Enter key press to submit form
 window.onkeypress = enterSubmit;
 function enterSubmit() {
  if(event.keyCode==13) {
    zoomtoaddress();
  }
 }

 function initialize() {
 	map = new google.maps.Map(document.getElementById('map_canvas'), {
 	    center: new google.maps.LatLng(42.5, -92.2),
 		zoom: 10,
 		minZoom: 8,
 		maxZoom: 20,
 		mapTypeControl: false,
 	  	streetViewControl: false,
 	    mapTypeId: google.maps.MapTypeId.TERRAIN
 	});
 	loadmap();
 }

 google.maps.event.addDomListener(window, 'load', initialize);
 </script> 
 </head> 
 <body>

 <table>
 	<tr>
 		<td><div id="map_canvas"></div></td>
 		<td><div id="legend"> 
 			<div>
            <h1>Historic Places in <br /> Eastern Iowa<br></h1>
            <hr />
            <p>- This map shows all places in and around Black Hawk County that are listed on the National Register of Historic Places. Places are represented by blue dots.</p>
 			<p>- City limits are color-coded based on the average age of when their historic locations were most significant:</p>
            
            <div class="colors">
              <span class="one"></span> 1850<br>
              <span class="two"></span> 1851 - 1875<br>
              <span class="three"></span> 1876 - 1900<br>
              <span class="four"></span> 1901 - 1925<br>
            </div>
            <br />
 			<p>- Rollover a place to see during what era(s) it was historically significant.</p>
 			</div>
 			<p>
 				<div id="search"><strong>- Search for your hometown:</strong><br />
 				<input id="address" type="text"><br />
 				<input onClick="zoomtoaddress()" value="Search" type="button">
 			</p>
 			<hr />
 			<p>
 			<em>Source: <a href="http://nrhp.focus.nps.gov/natreg/docs/All_Data.html" target="_blank">NRIS</a>
 			<br />
 			Map by: <a href="http://twitter.com/CourierEssig" target="_blank">Chris Essig</a></em>
 		</p>
 		</div></div></td>
 	</tr>
 </table>
 </body> 
 </html>
	## View online: http://wcfcourier.com/app/special/national_register/

	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

	<title>WCFCourier.com - Historic places in Eastern Iowa</title>

	<style>
	body { font-family: Arial, sans-serif; }

	#search {
	font-family: Arial, sans-serif;}

	#map_canvas {
	border: 1px solid #999999;
	height: 565px;
	width:700px;
	}

	#legend {
	width:225px;
	background-color:#FFFFFF;
	padding:10px;
	font-family: Arial, sans-serif;
	font-size:14px;
	border: 1px solid #999999;
	line-height:1.3em;
	}

	#legend h1 {font-size:18px; margin:0 0 4px 0; text-align: center;}
	#legend h2 {font-size:14px; margin:0;}
	#legend h3 {font-size:13px; margin: 10px 0 0 0;}

	#legend .colors {float:left;line-height:23px; width:150px; margin: 10px 0; font-weight: bold;}
	#legend .colors span {height:20px; width:20px; margin-right:5px; display:block; float:left; clear:left;}
	#legend .one {background-color: #2b8cbe; border: 1px solid #000000;}
	#legend .two {background-color: #7bccc4; border: 1px solid #000000;}
	#legend .three {background-color: #bae4bc; border: 1px solid #000000;}
	#legend .four {background-color: #f0f9e8; border: 1px solid #000000;}

	#legend p {clear:both; margin:5px 0 0 0;}

	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

	<!-- INCLUDE THIS SCRIPT REFERENCE FOR MOUSEOVER -->
	<script type="text/javascript" src="fusiontips.js"></script>

	<script type="text/javascript" id="script">
	var map;
	var layer;
	var geocoder = new google.maps.Geocoder();

	function loadmap() {
	layer2 = new google.maps.FusionTablesLayer({
	query: {
	select: 'geometry',
	from: 2814002
	},
	suppressInfoWindows: true
	});
	layer2.setMap(map);

	layer3 = new google.maps.FusionTablesLayer({
	query: {
	select: 'geometry',
	from: 2824727
	},
	suppressInfoWindows: true
	});
	layer3.setMap(map);

	layer = new google.maps.FusionTablesLayer({
	query: {
	select: 'Mappable_location',
	from: 2813443
	},
	suppressInfoWindows: true,
	styles: [{
	markerOptions: {
	iconName: "small_blue"
	}
	}]
	});
	layer.setMap(map);

	// Enables rollover
	layer.enableMapTips({
	select: "'Name', 'Location', 'City', 'Significance'",
	from: 2813443,
	geometryColumn: 'Mappable_location',
	suppressMapTips: false,
	delay: 1,
	tolerance: 8
	});
	}

	function zoomtoaddress() {

	// Use the geocoder to geocode the address
	geocoder.geocode( { 'address': document.getElementById("address").value }, function(results, status) {
	// If the status of the geocode is OK
	if (status == google.maps.GeocoderStatus.OK) {
	// Change the center and zoom of the map
	map.setCenter(results[0].geometry.location);
	map.setZoom(12);
	}
	});
	}

	// Register Enter key press to submit form
	window.onkeypress = enterSubmit;
	function enterSubmit() {
	if(event.keyCode==13) {
	zoomtoaddress();
	}
	}

	function initialize() {
	map = new google.maps.Map(document.getElementById('map_canvas'), {
	center: new google.maps.LatLng(42.5, -92.2),
	zoom: 10,
	minZoom: 8,
	maxZoom: 20,
	mapTypeControl: false,
	streetViewControl: false,
	mapTypeId: google.maps.MapTypeId.TERRAIN
	});
	loadmap();
	}

	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>
	<body>

	<table>
	<tr>
	<td><div id="map_canvas"></div></td>
	<td><div id="legend">
	<div>
	<h1>Historic Places in <br /> Eastern Iowa<br></h1>
	<hr />
	<p>- This map shows all places in and around Black Hawk County that are listed on the National Register of Historic Places. Places are represented by blue dots.</p>
	<p>- City limits are color-coded based on the average age of when their historic locations were most significant:</p>

	<div class="colors">
	<span class="one"></span> 1850<br>
	<span class="two"></span> 1851 - 1875<br>
	<span class="three"></span> 1876 - 1900<br>
	<span class="four"></span> 1901 - 1925<br>
	</div>
	<br />
	<p>- Rollover a place to see during what era(s) it was historically significant.</p>
	</div>
	<p>
	<div id="search"><strong>- Search for your hometown:</strong><br />
	<input id="address" type="text"><br />
	<input onClick="zoomtoaddress()" value="Search" type="button">
	</p>
	<hr />
	<p>
	<em>Source: <a href="http://nrhp.focus.nps.gov/natreg/docs/All_Data.html" target="_blank">NRIS</a>
	<br />
	Map by: <a href="http://twitter.com/CourierEssig" target="_blank">Chris Essig</a></em>
	</p>
	</div></div></td>
	</tr>
	</table>
	</body>
	</html>