chrismytton/index.html

## index.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: 0px; padding: 0px }
  #map_canvas { height: 600px; width: 800px; }
  .hidden { display: none; }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  window.onload = function initialize() {
    var latlng = new google.maps.LatLng(53.25, -2.644),
        thetford = new google.maps.LatLng(52.42, 0.753);

    var myOptions = {
      zoom: 6,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var markerContent = document.getElementById("marker-content").innerHTML;

    var infoWindow = new google.maps.InfoWindow({
        content: markerContent
    });

    var marker = new google.maps.Marker({
        position: thetford,
        map: map,
        title: "Thetford"
    });

    google.maps.event.addListener(marker, "click", function() {
        infoWindow.open(map, marker);
    });
  }

</script>
</head>
<body>
  <div id="map_canvas"></div>

  <div id="marker-content" class="hidden">
    <img src="https://secure.gravatar.com/avatar/049cff7912a937a751f66c19d74919a9?s=140&d=https%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-140.png" width="140" height="140" />
    <p>Content in the <strong>marker</strong></p>
  </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: 0px; padding: 0px }
	#map_canvas { height: 600px; width: 800px; }
	.hidden { display: none; }
	</style>

	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	window.onload = function initialize() {
	var latlng = new google.maps.LatLng(53.25, -2.644),
	thetford = new google.maps.LatLng(52.42, 0.753);

	var myOptions = {
	zoom: 6,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"),
	myOptions);

	var markerContent = document.getElementById("marker-content").innerHTML;

	var infoWindow = new google.maps.InfoWindow({
	content: markerContent
	});

	var marker = new google.maps.Marker({
	position: thetford,
	map: map,
	title: "Thetford"
	});

	google.maps.event.addListener(marker, "click", function() {
	infoWindow.open(map, marker);
	});
	}

	</script>
	</head>
	<body>
	<div id="map_canvas"></div>

	<div id="marker-content" class="hidden">
	<img src="https://secure.gravatar.com/avatar/049cff7912a937a751f66c19d74919a9?s=140&d=https%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-140.png" width="140" height="140" />
	<p>Content in the <strong>marker</strong></p>
	</div>
	</body>
	</html>