Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Point generator for Google Map routes
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.