xandout/geoCode.html

## geoCode.html
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
geocoder = new google.maps.Geocoder()
function geoCode(address){
	var simpleLoc = {};
	geocoder.geocode({ 'address': address }, function(results, status) {
		simpleLoc['status'] = status;
		simpleLoc['latlng'] = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());

	});
	return simpleLoc;
}
</script>

<script type="text/javascript">
	var dests = new Array();
	var directionDisplay;
	var directionsService = new google.maps.DirectionsService();
	var map;


	var home = new google.maps.LatLng(35.744848,-81.68665499999997); //Home Base

	function initialize() {
		directionsDisplay = new google.maps.DirectionsRenderer();
		var myOptions = {
			zoom: 7,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			center: home
		}
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		directionsDisplay.setMap(map);
		directionsDisplay.setPanel(document.getElementById("directionsPanel"));
	}

	function addAddress(){
		dests.push(geoCode(document.getElementById('address_text').value));
		//dests[i].latlng;
		document.getElementById('address_text').value = '';
	}
	function calcRoute() {


		var start = home;
		var end = home;
		var points = [];
		for(var wp in dests){
			points[wp] = {};
			points[wp]['location'] = dests[wp].latlng;
			points[wp]['stopover'] = true;
		}

		var request = {
			origin: start,
			destination: end,
			waypoints: points,
			optimizeWaypoints: true,
			travelMode: google.maps.DirectionsTravelMode.DRIVING
		};


		directionsService.route(request, function (result, status) {
			if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setDirections(result);
			}
		});
	}
</script>


<body onload="initialize();">
	<div id="map_canvas" style="width:70%; height:100%; float:left"></div>
	<div id="dirs" style="width:30%;height:100%;float:right;">
		<input id="address_text"></input>
		<button onclick="addAddress();">Add Address</button>
		<button onclick="calcRoute();">Calculate</button>
		<div id="directionsPanel" style="float:right;width:90%;height 100%; border-style:solid; border-width:5px;"></div>
	</div>
</body>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript">
	geocoder = new google.maps.Geocoder()
	function geoCode(address){
	var simpleLoc = {};
	geocoder.geocode({ 'address': address }, function(results, status) {
	simpleLoc['status'] = status;
	simpleLoc['latlng'] = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());

	});
	return simpleLoc;
	}
	</script>

	<script type="text/javascript">
	var dests = new Array();
	var directionDisplay;
	var directionsService = new google.maps.DirectionsService();
	var map;


	var home = new google.maps.LatLng(35.744848,-81.68665499999997); //Home Base

	function initialize() {
	directionsDisplay = new google.maps.DirectionsRenderer();
	var myOptions = {
	zoom: 7,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	center: home
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	directionsDisplay.setMap(map);
	directionsDisplay.setPanel(document.getElementById("directionsPanel"));
	}

	function addAddress(){
	dests.push(geoCode(document.getElementById('address_text').value));
	//dests[i].latlng;
	document.getElementById('address_text').value = '';
	}
	function calcRoute() {


	var start = home;
	var end = home;
	var points = [];
	for(var wp in dests){
	points[wp] = {};
	points[wp]['location'] = dests[wp].latlng;
	points[wp]['stopover'] = true;
	}

	var request = {
	origin: start,
	destination: end,
	waypoints: points,
	optimizeWaypoints: true,
	travelMode: google.maps.DirectionsTravelMode.DRIVING
	};


	directionsService.route(request, function (result, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	directionsDisplay.setDirections(result);
	}
	});
	}
	</script>


	<body onload="initialize();">
	<div id="map_canvas" style="width:70%; height:100%; float:left"></div>
	<div id="dirs" style="width:30%;height:100%;float:right;">
	<input id="address_text"></input>
	<button onclick="addAddress();">Add Address</button>
	<button onclick="calcRoute();">Calculate</button>
	<div id="directionsPanel" style="float:right;width:90%;height 100%; border-style:solid; border-width:5px;"></div>
	</div>
	</body>