erinbush/map4

## map4


	<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=false">
		</script>


	<!--Creating a new map-->
    <script type="text/javascript">
      function initialize() {

        var myLatlng = new google.maps.LatLng(37.768002,-78.205704);
		var mapOptions = {
		zoom: 4,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
						}

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

		var infoWindow = new google.maps.InfoWindow();

		for (var i = 0, length = json.length; i < length; i++) {
		var data = json[i],
		latLng = new google.maps.LatLng(data.lat, data.lng);

		// Creating a marker and putting it on the map
		var marker = new google.maps.Marker({
			position: latLng,
			map: map,
		title: data.title
		});
			}


		// Attaching a click event to the current marker
		google.maps.event.addListener(marker, "click", function(e) {
		infoWindow.setContent(data.description);
		infoWindow.open(map, marker);
		});

		// Creating a closure to retain the correct data
		//Note how I pass the current data in the loop into the closure (marker, data)
		(function(marker, data) {

		// Attaching a click event to the current marker
		google.maps.event.addListener(marker, "click", function(e) {
		infoWindow.setContent(data.description);
		infoWindow.open(map, marker);
		});

			})(marker, data);

    </script>

  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>


	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#map_canvas { height: 100% }
	</style>
	<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?sensor=false">
	</script>


	<!--Creating a new map-->
	<script type="text/javascript">
	function initialize() {

	var myLatlng = new google.maps.LatLng(37.768002,-78.205704);
	var mapOptions = {
	zoom: 4,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	}

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

	var infoWindow = new google.maps.InfoWindow();

	for (var i = 0, length = json.length; i < length; i++) {
	var data = json[i],
	latLng = new google.maps.LatLng(data.lat, data.lng);

	// Creating a marker and putting it on the map
	var marker = new google.maps.Marker({
	position: latLng,
	map: map,
	title: data.title
	});
	}



	// Attaching a click event to the current marker
	google.maps.event.addListener(marker, "click", function(e) {
	infoWindow.setContent(data.description);
	infoWindow.open(map, marker);
	});

	// Creating a closure to retain the correct data
	//Note how I pass the current data in the loop into the closure (marker, data)
	(function(marker, data) {

	// Attaching a click event to the current marker
	google.maps.event.addListener(marker, "click", function(e) {
	infoWindow.setContent(data.description);
	infoWindow.open(map, marker);
	});

	})(marker, data);

	</script>

	</head>
	<body onload="initialize()">
	<div id="map_canvas" style="width:100%; height:100%"></div>
	</body>
	</html>