ChicagoMap/gist:1104919

## gistfile1.html
<!DOCTYPE html>
<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>Google Maps JavaScript API v3 Example: KmlLayer KML</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;


function initialize() {
  var chicago = new google.maps.LatLng(41.875696,-87.624207);
  var myOptions = {
    zoom: 11,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }


  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


  boundary();

}


function boundary( ){
  var boundary = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/CITYBOUNDARYnew.kmz');
  boundary.setMap(map);
}


function riverwalk_Socrata( ){
  var riverwalk = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/Riverwalknew.kmz');
  riverwalk.setMap(map);
}


function gardens_Socrata( ){
  var gardens = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/Neighborspace_Gardensnew.kmz');
  gardens.setMap(map);
}


function malls_Socrata( ){
  var malls = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/Open_Space_Malls_and_Plazanew.kmz');
  malls.setMap(map);
}


function boulevards_Socrata( ){
  var boulevards = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/Boulevardsnew.kmz');
  boulevards.setMap(map);
}


function campusparks_KMZ( ){
  var campusparks = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/Campus_Parksnew.kmz');
  campusparks.setMap(map);
}


function habitats_KMZ( ){
  var habitats = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/Open_Space_Habitat.kmz');
  habitats.setMap(map);
}


function tree_ft(){
    tree = new google.maps.FusionTablesLayer({
      query: {
        select: 'Geocodable address',
        from: '910793'
      },
      styles: [{
        markerOptions: {
          iconName: "parks"
      }
     }]
    });
    tree.setMap(map);
}


</script>
</head>
<body onload="initialize()">
  <input type="button" value="Riverwalk" onclick="riverwalk_Socrata();"/>
  <input type="button" value="Neighbor Space Gardens" onclick="gardens_Socrata();"/>
  <input type="button" value="Malls & Plazas" onclick="malls_Socrata();"/>
  <input type="button" value="Boulevards" onclick="boulevards_Socrata();"/>
  <input type="button" value="Campus Parks" onclick="campusparks_KMZ();"/>
  <input type="button" value="Habitats" onclick="habitats_KMZ();"/>
  <input type="button" value="Tree" onclick="tree_ft();"/>
  <div id="map_canvas"></div>
</body>
</html>
	<!DOCTYPE html>
	<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>Google Maps JavaScript API v3 Example: KmlLayer KML</title>
	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	var map;


	function initialize() {
	var chicago = new google.maps.LatLng(41.875696,-87.624207);
	var myOptions = {
	zoom: 11,
	center: chicago,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	}


	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


	boundary();

	}


	function boundary( ){
	var boundary = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/CITYBOUNDARYnew.kmz');
	boundary.setMap(map);
	}



	function riverwalk_Socrata( ){
	var riverwalk = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/Riverwalknew.kmz');
	riverwalk.setMap(map);
	}


	function gardens_Socrata( ){
	var gardens = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/Neighborspace_Gardensnew.kmz');
	gardens.setMap(map);
	}


	function malls_Socrata( ){
	var malls = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/Open_Space_Malls_and_Plazanew.kmz');
	malls.setMap(map);
	}


	function boulevards_Socrata( ){
	var boulevards = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/Boulevardsnew.kmz');
	boulevards.setMap(map);
	}


	function campusparks_KMZ( ){
	var campusparks = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/Campus_Parksnew.kmz');
	campusparks.setMap(map);
	}


	function habitats_KMZ( ){
	var habitats = new google.maps.KmlLayer('http://www.cityofchicago.org/content/dam/city/progs/trnsprncy/Data/Open_Space_Habitat.kmz');
	habitats.setMap(map);
	}


	function tree_ft(){
	tree = new google.maps.FusionTablesLayer({
	query: {
	select: 'Geocodable address',
	from: '910793'
	},
	styles: [{
	markerOptions: {
	iconName: "parks"
	}
	}]
	});
	tree.setMap(map);
	}



	</script>
	</head>
	<body onload="initialize()">
	<input type="button" value="Riverwalk" onclick="riverwalk_Socrata();"/>
	<input type="button" value="Neighbor Space Gardens" onclick="gardens_Socrata();"/>
	<input type="button" value="Malls & Plazas" onclick="malls_Socrata();"/>
	<input type="button" value="Boulevards" onclick="boulevards_Socrata();"/>
	<input type="button" value="Campus Parks" onclick="campusparks_KMZ();"/>
	<input type="button" value="Habitats" onclick="habitats_KMZ();"/>
	<input type="button" value="Tree" onclick="tree_ft();"/>
	<div id="map_canvas"></div>
	</body>
	</html>