index.html

<html> 
<head> 
	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> 
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
	<title> Simstadt Region Chooser </title>
	<meta name="keywords" content="polygon,creator,google map,v3,draw,paint">
	<meta name="description" content="Google Map V3 Polygon Creator for Simstadt">
	
	<link rel="stylesheet" type="text/css" href="style.css">
	
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="proj4.js"></script>
	<script type="text/javascript" src="polygon.js"></script>
	
	<script type="text/javascript">
	$(function(){
		  //create map
		 var gruenbuehl =new google.maps.LatLng(48.881, 9.213);
		 var myOptions = {
		  	zoom: 16,
		  	center: gruenbuehl ,
		  	mapTypeId: google.maps.MapTypeId.HYBRID
		  }
		 map = new google.maps.Map(document.getElementById('main-map'), myOptions);
		 
		 var creator = new PolygonCreator(map);
		 
		 //reset
		 $('#reset').click(function(){ 
		 		creator.destroy();
		 		creator=null;
		 		
		 		creator=new PolygonCreator(map);
		 });		 
		 
	});	
	</script>
</head>
<body>

	<div id="header">
		<ul>
			<li class="title">
				Simstadt Region Chooser
			</li>
		</ul>
	   <p>
		<span class="instruction">Demo Instruction:</span>
		Left click on the map to create markers, when last marker meets first marker, it will form a polygon.
		</p>
	</div>
	<div id="main-map">
	</div>
	<div id="side">
		<input id="reset" value="Reset" type="button" class="navi"/>
		<div   id="dataPanel">
		</div>
	</div>
</body>
</html>