tzmartin/GPointGenerator.html

## GPointGenerator.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--

  Utility to generate points along a route using the Google Maps API
  Directions service.

  2011-03-31 Rob Gabbard, cintimedia LLC, www.cintimedia.com

 Based on the Google Maps API Optimized Directions demo at:
	http://gmaps-samples-v3.googlecode.com/svn/trunk/drivingdirections/directions-optimized.html

 Copyright 2010 Google Inc.
 Licensed under the Apache License, Version 2.0:
 http://www.apache.org/licenses/LICENSE-2.0
 -->
<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 Map route point generator</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionsService = new google.maps.DirectionsService();
  var map;
  var origin = null;
  var destination = null;
  var waypoints = [];
  var markers = [];

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var startlocation = new google.maps.LatLng(39.115677,-84.511642);
    var myOptions = {
      zoom:15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      draggableCursor: "pointer",
      center: startlocation
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);

    google.maps.event.addListener(map, 'click', function(event) {
      if (origin == null) {
        origin = event.latLng;
        addMarker(origin);
      } else if (destination == null) {
        destination = event.latLng;
        addMarker(destination);
      } else {
        if (waypoints.length < 9) {
          waypoints.push({ location: destination, stopover: true });
          destination = event.latLng;
          addMarker(destination);
        } else {
          alert("Maximum number of waypoints reached");
        }
      }
    });
  }

  function addMarker(latlng) {
    markers.push(new google.maps.Marker({
      position: latlng,
      map: map,
      icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
    }));
  }

  function serializeLatLng(ll) {
	return '{latitude: ' + ll.lat() + ', longitude: ' + ll.lng() + '}';
	}

  function calcRoute() {
    if (origin == null) {
      alert("Click on the map to add a start point");
      return;
    }

    if (destination == null) {
      alert("Click on the map to add an end point");
      return;
    }

    var mode = google.maps.DirectionsTravelMode.DRIVING;

    var request = {
        origin: origin,
        destination: destination,
        waypoints: waypoints,
        travelMode: mode,
        optimizeWaypoints: true,
        avoidHighways: false
    };

    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
		var points_text = "", format = "raw";
		if (document.getElementById("json").checked) {
			format = "json";
			points_text += 'var routeCenter = ' + serializeLatLng(response.routes[0].bounds.getCenter()) + ';\n';
			points_text += 'var routeSpan = ' + serializeLatLng(response.routes[0].bounds.toSpan()) + ';\n';
			points_text += 'var routePoints = [\n'
		}
		response.routes[0].bounds.getCenter.lng
		var nPoints = response.routes[0].overview_path.length;
		for (var i = 0; i < nPoints; i++) {
			if ( format == "json" ) {
				points_text += '\t' + serializeLatLng(response.routes[0].overview_path[i]) + (i < (nPoints - 1) ? ',\n' : '');
			} else {
				points_text += response.routes[0].overview_path[i].lat() + ',' + response.routes[0].overview_path[i].lng() + '\n';
			}
		}
		if ( format == "json" ) {
			points_text += '\n];'
		}

		var points_textarea=document.getElementById("points_textarea");
		points_textarea.value = points_text;
		clearMarkers();
	    directionsDisplay.setDirections(response);
      }
    });
  }

  function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
  }

  function clearWaypoints() {
    markers = [];
    origin = null;
    destination = null;
    waypoints = [];
  }

  function select_all()	{
	var points_textarea=document.getElementById("points_textarea");
	points_textarea.focus();
	points_textarea.select();
  }

  function reset() {
    clearMarkers();
    clearWaypoints();
    directionsDisplay.setMap(null);
    directionsDisplay.setPanel(null);
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
	document.getElementById("points_textarea").value = '';
  }
</script>
</head>
<body onload="initialize()">
<h2>Google Map route point generator</h2>
Click on the map to select the route points (up to 8).
<br/><br/>
<input type="button" value="Get Points" onclick="calcRoute()" />&nbsp;<input type="button" value="Reset" onclick="reset()" />&nbsp;<input type="checkbox" id="json" checked />JSON output
<br/><br/>
<div style="display:block">
	<div id="map_canvas" style="float:left; border: 1px solid black; position:absolute; width:600px; height:600px;position:relative"></div>
	<div style="float:left;"><textarea readonly id="points_textarea" style="width:600px;height:600px" onClick="select_all();"></textarea></div>
</div>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<!--

	Utility to generate points along a route using the Google Maps API
	Directions service.

	2011-03-31 Rob Gabbard, cintimedia LLC, www.cintimedia.com

	Based on the Google Maps API Optimized Directions demo at:
	http://gmaps-samples-v3.googlecode.com/svn/trunk/drivingdirections/directions-optimized.html

	Copyright 2010 Google Inc.
	Licensed under the Apache License, Version 2.0:
	http://www.apache.org/licenses/LICENSE-2.0
	-->
	<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 Map route point generator</title>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	var directionsService = new google.maps.DirectionsService();
	var map;
	var origin = null;
	var destination = null;
	var waypoints = [];
	var markers = [];

	function initialize() {
	directionsDisplay = new google.maps.DirectionsRenderer();
	var startlocation = new google.maps.LatLng(39.115677,-84.511642);
	var myOptions = {
	zoom:15,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	draggableCursor: "pointer",
	center: startlocation
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	directionsDisplay.setMap(map);

	google.maps.event.addListener(map, 'click', function(event) {
	if (origin == null) {
	origin = event.latLng;
	addMarker(origin);
	} else if (destination == null) {
	destination = event.latLng;
	addMarker(destination);
	} else {
	if (waypoints.length < 9) {
	waypoints.push({ location: destination, stopover: true });
	destination = event.latLng;
	addMarker(destination);
	} else {
	alert("Maximum number of waypoints reached");
	}
	}
	});
	}

	function addMarker(latlng) {
	markers.push(new google.maps.Marker({
	position: latlng,
	map: map,
	icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
	}));
	}

	function serializeLatLng(ll) {
	return '{latitude: ' + ll.lat() + ', longitude: ' + ll.lng() + '}';
	}

	function calcRoute() {
	if (origin == null) {
	alert("Click on the map to add a start point");
	return;
	}

	if (destination == null) {
	alert("Click on the map to add an end point");
	return;
	}

	var mode = google.maps.DirectionsTravelMode.DRIVING;

	var request = {
	origin: origin,
	destination: destination,
	waypoints: waypoints,
	travelMode: mode,
	optimizeWaypoints: true,
	avoidHighways: false
	};

	directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	var points_text = "", format = "raw";
	if (document.getElementById("json").checked) {
	format = "json";
	points_text += 'var routeCenter = ' + serializeLatLng(response.routes[0].bounds.getCenter()) + ';\n';
	points_text += 'var routeSpan = ' + serializeLatLng(response.routes[0].bounds.toSpan()) + ';\n';
	points_text += 'var routePoints = [\n'
	}
	response.routes[0].bounds.getCenter.lng
	var nPoints = response.routes[0].overview_path.length;
	for (var i = 0; i < nPoints; i++) {
	if ( format == "json" ) {
	points_text += '\t' + serializeLatLng(response.routes[0].overview_path[i]) + (i < (nPoints - 1) ? ',\n' : '');
	} else {
	points_text += response.routes[0].overview_path[i].lat() + ',' + response.routes[0].overview_path[i].lng() + '\n';
	}
	}
	if ( format == "json" ) {
	points_text += '\n];'
	}

	var points_textarea=document.getElementById("points_textarea");
	points_textarea.value = points_text;
	clearMarkers();
	directionsDisplay.setDirections(response);
	}
	});
	}

	function clearMarkers() {
	for (var i = 0; i < markers.length; i++) {
	markers[i].setMap(null);
	}
	}

	function clearWaypoints() {
	markers = [];
	origin = null;
	destination = null;
	waypoints = [];
	}

	function select_all() {
	var points_textarea=document.getElementById("points_textarea");
	points_textarea.focus();
	points_textarea.select();
	}

	function reset() {
	clearMarkers();
	clearWaypoints();
	directionsDisplay.setMap(null);
	directionsDisplay.setPanel(null);
	directionsDisplay = new google.maps.DirectionsRenderer();
	directionsDisplay.setMap(map);
	document.getElementById("points_textarea").value = '';
	}
	</script>
	</head>
	<body onload="initialize()">
	<h2>Google Map route point generator</h2>
	Click on the map to select the route points (up to 8).
	<br/><br/>
	<input type="button" value="Get Points" onclick="calcRoute()" /> <input type="button" value="Reset" onclick="reset()" /> <input type="checkbox" id="json" checked />JSON output
	<br/><br/>
	<div style="display:block">
	<div id="map_canvas" style="float:left; border: 1px solid black; position:absolute; width:600px; height:600px;position:relative"></div>
	<div style="float:left;"><textarea readonly id="points_textarea" style="width:600px;height:600px" onClick="select_all();"></textarea></div>
	</div>
	</body>
	</html>