Reference

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.
or
g/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?s
ensor=false&libraries=places"></script>
<script type="text/javascript">
var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', function () {
new google.maps.places.SearchBox(document.getElementById('txtSource'
));
new google.maps.places.SearchBox(document.getElementById('txtDestina
tion'));
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable'
: true });
});
var polyline = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeWeight: 3
});
poly2 = new google.maps.Polyline({
path: [],
strokeWeight: 3
});
function startAnimation() {
eol = polyline.Distance();
map.setCenter(polyline.getPath().getAt(0));
marker = new google.maps.Marker({
position: polyline.getPath().getAt(0),
map: map,
icon: icon
});
path: [polyline.getPath().getAt(0)],
strokeColor: "#0000FF",
strokeWeight: 10
});
// map.addOverlay(poly2);
setTimeout("animate(50)", 2000); // Allow time for the initial map display
}
var
var
var
var
var
var
var
step = 50; // 5; // metres

tick = 100; // milliseconds
eol;
k = 0;
stepnum = 0;
speed = "";
lastVertex = 1;
//=============== animation functions ======================

function updatePoly(d) {
// Spawn a new polyline every 20 vertices, because updating a 100-vertex pol
y is too slow
if (poly2.getPath().getLength() > 20) {
poly2 = new google.maps.Polyline([polyline.getPath().getAt(lastVertex 1)]);
// map.addOverlay(poly2)
}
if (polyline.GetIndexAtDistance(d) < lastVertex + 2) {
poly2.getPath().removeAt(poly2.getPath().getLength() - 1);
}
poly2.getPath().insertAt(poly2.getPath().getLength(), polyline.GetPointA
tDistance(d));
} else {
poly2.getPath().insertAt(poly2.getPath().getLength(), endLocation.latlng
);
}
}
function animate(d) {
if (d > eol) {
map.panTo(endLocation.latlng);
marker.setPosition(endLocation.latlng);
return;
}
var p = polyline.GetPointAtDistance(d);
map.panTo(p);
var lastPosn = marker.getPosition();
marker.setPosition(p);
var heading = google.maps.geometry.spherical.computeHeading(lastPosn, p);
icon.rotation = heading;
marker.setIcon(icon);
updatePoly(d);
timerHandle = setTimeout("animate(" + (d + step) + ")", tick);
}
function GetRoute() {
var mumbai = new google.maps.LatLng(18.9750, 72.8258);
var mapOptions = {
zoom: 7,
center: mumbai
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptio
ns);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('dvPanel'));
//*********DIRECTIONS AND ROUTE**********************//
source = document.getElementById("txtSource").value;
destination = document.getElementById("txtDestination").value;
var request = {
origin: new google.maps.LatLng(18.9750, 72.8258), //source,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var bounds = new google.maps.LatLngBounds();
var route = response.routes[0];
startLocation = new Object();
endLocation = new Object();
// For each route, display summary information.
var path = response.routes[0].overview_path;
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
if (i === 0) {
startLocation.latlng = legs[i].start_location;
startLocation.address = legs[i].start_address;
// marker = createMarker(legs[i].start_location, "start",
legs[i].start_address, "green");
}
endLocation.latlng = legs[i].end_location;
endLocation.address = legs[i].end_address;
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (k = 0; k < nextSegment.length; k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
polyline.setMap(map);
map.fitBounds(bounds);
map.setZoom(18);
startAnimation();
}
});
//*********DISTANCE AND DURATION**********************//
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [source],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status == google.maps.DistanceMatrixStatus.OK && response.ro
ws[0].elements[0].status != "ZERO_RESULTS") {
var distance = response.rows[0].elements[0].distance.text;
var duration = response.rows[0].elements[0].duration.text;

var dvDistance = document.getElementById("dvDistance");
dvDistance.innerHTML = "";
dvDistance.innerHTML += "Distance: " + distance + "<br />";
dvDistance.innerHTML += "Duration:" + duration;
} else {
alert("Unable to find the distance via road.");
}
});
}
//=============== ~animation funcitons =====================
var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.
643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17
.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773
c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.6
25,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V2
7.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.33
6H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z";
var icon = {
path: car,
scale: .7,
strokeColor: 'white',
strokeWeight: .10,
fillOpacity: 1,
fillColor: '#404040',
offset: '5%',
// rotation: parseInt(heading[i]),
anchor: new google.maps.Point(10, 25) // orig 10,50 back of car, 10,0 front
of car, 10,25 center of car
};
/*********************************************************************\
*
*
* epolys.js
by Mike Williams *
* updated to API v3
by Larry Ross
*
*
*
* A Google Maps API Extension
*
*
*
* Adds various Methods to google.maps.Polygon and google.maps.Polyline *
*
*
* .Contains(latlng) returns true is the poly contains the specified *
*
GLatLng
*
*
*
* .Area()
returns the approximate area of a poly that is
*
*
not self-intersecting
*
*
*
* .Distance()
returns the length of the poly path
*
*
*
* .Bounds()
returns a GLatLngBounds that bounds the poly
*
*
*
* .GetPointAtDistance() returns a GLatLng at the specified distance *
*
along the path.
*
*
The distance is specified in metres
*
*
Reurns null if the path is shorter than that
*
*
*
* .GetPointsAtDistance() returns an array of GLatLngs at the

*
*
specified interval along the path.
*
*
*
*
*
* .GetIndexAtDistance() returns the vertex number at the specified
*
*
distance along the path.
*
*
*
*
Returns null if the path is shorter than that
*
*
*
* .Bearing(v1?,v2?) returns the bearing between two vertices
*
*
if v1 is null, returns bearing from first to last *
*
if v2 is null, returns bearing from v1 to next
*
*
*
*
*
***********************************************************************
*
*
* This Javascript is provided by Mike Williams
*
* Blackpool Community Church Javascript Team
*
* http://www.blackpoolchurch.org/
*
* http://econym.org.uk/gmap/
*
*
*
* This work is licenced under a Creative Commons Licence
*
* http://creativecommons.org/licenses/by/2.0/uk/
*
*
*
***********************************************************************
*
*
* Version 1.1
6-Jun-2007
*
* Version 1.2
1-Jul-2007 - fix: Bounds was omitting vertex zero *
*
add: Bearing
*
* Version 1.3
28-Nov-2008 add: GetPointsAtDistance()
*
* Version 1.4
12-Jan-2009 fix: GetPointsAtDistance()
*
* Version 3.0
11-Aug-2010 update to v3
*
*
*
\*********************************************************************/
// === first support methods that don't (yet) exist in v3
google.maps.LatLng.prototype.distanceFrom = function (newLatLng) {
var EarthRadiusMeters = 6378137.0; // meters
var lat1 = this.lat();
var lon1 = this.lng();
var lat2 = newLatLng.lat();
var lon2 = newLatLng.lng();
var dLat = (lat2 - lat1) * Math.PI / 180;
var dLon = (lon2 - lon1) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI /
180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = EarthRadiusMeters * c;
return d;
}
google.maps.LatLng.prototype.latRadians = function () {
return this.lat() * Math.PI / 180;
}
google.maps.LatLng.prototype.lngRadians = function () {
return this.lng() * Math.PI / 180;
}
// === A method which returns the length of a path in metres ===
google.maps.Polygon.prototype.Distance = function () {
var dist = 0;
for (var i = 1; i < this.getPath().getLength(); i++) {
dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i - 1)
);
}
return dist;
}
// === A method which returns a GLatLng of a point a given distance along the pa
th ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polygon.prototype.GetPointAtDistance = function (metres) {
// some awkward special cases
if (metres == 0) return this.getPath().getAt(0);
if (metres < 0) return null;
if (this.getPath().getLength() < 2) return null;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength() && dist < metres); i++) {
olddist = dist;
);
}
if (dist < metres) {
return null;
}
var p1 = this.getPath().getAt(i - 2);
var m = (metres - olddist) / (dist - olddist);
return new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng()
+ (p2.lng() - p1.lng()) * m);
}
// === A method which returns an array of GLatLngs of points a given interval al
ong the path ===
google.maps.Polygon.prototype.GetPointsAtDistance = function (metres) {
var next = metres;
var points = [];
if (metres <= 0) return points;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength()); i++) {
olddist = dist;
);
while (dist > next) {
var p2 = this.getPath().getAt(i);
var m = (next - olddist) / (dist - olddist);
points.push(new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat())
* m, p1.lng() + (p2.lng() - p1.lng()) * m));
next += metres;
}
}
return points;
}
// === A method which returns the Vertex number at a given distance along the pa
th ===
google.maps.Polygon.prototype.GetIndexAtDistance = function (metres) {
var dist = 0;
var olddist = 0;
for (var i = 1;
olddist = dist;
);
}
return null;
}
return i;
}
// === Copy all the above functions to GPolyline ===
google.maps.Polyline.prototype.Distance = google.maps.Polygon.prototype.Distance
;
google.maps.Polyline.prototype.GetPointAtDistance = google.maps.Polygon.prototyp
e.GetPointAtDistance;
google.maps.Polyline.prototype.GetPointsAtDistance = google.maps.Polygon.prototy
pe.GetPointsAtDistance;
google.maps.Polyline.prototype.GetIndexAtDistance = google.maps.Polygon.prototyp
e.GetIndexAtDistance;
</script>
<table border="0" cellpadding="0" cellspacing="3">
<tr>
<td colspan="2">
Source:
<input type="text" id="txtSource" value="Bandra, Mumbai, India"
style="width: 200px" />
Destination:
<input type="text" id="txtDestination" value="Andheri, Mumbai, I
ndia" style="width: 200px" />
<br />
<input type="button" value="Get Route" onclick="GetRoute()" />
<hr />
</td>
</tr>
<tr>
<td colspan="2">
<div id="dvDistance">
</div>
</td>
</tr>
<tr>
<td>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</td>
<td>
<div id="dvPanel" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
ransitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?s
ensor=false&libraries=places"></script>
<script type="text/javascript">
var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', function () {
new google.maps.places.SearchBox(document.getElementById('txtSource'
));
new google.maps.places.SearchBox(document.getElementById('txtDestina
tion'));
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable'
: true });
});
var polyline = new google.maps.Polyline({
path: [],
strokeWeight: 3
});
path: [],
strokeWeight: 3
});
function startAnimation() {
eol = polyline.Distance();
map.setCenter(polyline.getPath().getAt(0));
marker = new google.maps.Marker({
position: polyline.getPath().getAt(0),
map: map,
icon: icon
});
path: [polyline.getPath().getAt(0)],
strokeColor: "#0000FF",
strokeWeight: 10
});
// map.addOverlay(poly2);
setTimeout("animate(50)", 2000); // Allow time for the initial map display
}
var step = 50; // 5; // metres

var tick = 100; // milliseconds
var
var
var
var
var
eol;
k = 0;
stepnum = 0;
speed = "";
lastVertex = 1;
//=============== animation functions ======================

function updatePoly(d) {
// Spawn a new polyline every 20 vertices, because updating a 100-vertex pol
y is too slow
poly2 = new google.maps.Polyline([polyline.getPath().getAt(lastVertex 1)]);
// map.addOverlay(poly2)
}
if (polyline.GetIndexAtDistance(d) < lastVertex + 2) {
poly2.getPath().removeAt(poly2.getPath().getLength() - 1);
}
poly2.getPath().insertAt(poly2.getPath().getLength(), polyline.GetPointA
tDistance(d));
} else {
poly2.getPath().insertAt(poly2.getPath().getLength(), endLocation.latlng
);
}
}
function animate(d) {
if (d > eol) {
map.panTo(endLocation.latlng);
marker.setPosition(endLocation.latlng);
return;
}
var p = polyline.GetPointAtDistance(d);
map.panTo(p);
var lastPosn = marker.getPosition();
marker.setPosition(p);
var heading = google.maps.geometry.spherical.computeHeading(lastPosn, p);
icon.rotation = heading;
marker.setIcon(icon);
updatePoly(d);
timerHandle = setTimeout("animate(" + (d + step) + ")", tick);
}
function GetRoute() {
var mumbai = new google.maps.LatLng(18.9750, 72.8258);
var mapOptions = {
zoom: 7,
center: mumbai
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptio
ns);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('dvPanel'));
//*********DIRECTIONS AND ROUTE**********************//
source = document.getElementById("txtSource").value;
destination = document.getElementById("txtDestination").value;
var request = {
origin: new google.maps.LatLng(18.9750, 72.8258), //source,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var bounds = new google.maps.LatLngBounds();
var route = response.routes[0];
startLocation = new Object();
endLocation = new Object();
// For each route, display summary information.
var path = response.routes[0].overview_path;
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
if (i === 0) {
startLocation.latlng = legs[i].start_location;
startLocation.address = legs[i].start_address;
// marker = createMarker(legs[i].start_location, "start",
legs[i].start_address, "green");
}
endLocation.latlng = legs[i].end_location;
endLocation.address = legs[i].end_address;
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (k = 0; k < nextSegment.length; k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
polyline.setMap(map);
map.fitBounds(bounds);
map.setZoom(18);
startAnimation();
}
});
//*********DISTANCE AND DURATION**********************//
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [source],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status == google.maps.DistanceMatrixStatus.OK && response.ro
ws[0].elements[0].status != "ZERO_RESULTS") {
var distance = response.rows[0].elements[0].distance.text;
var duration = response.rows[0].elements[0].duration.text;
var dvDistance = document.getElementById("dvDistance");
dvDistance.innerHTML = "";
dvDistance.innerHTML += "Distance: " + distance + "<br />";

dvDistance.innerHTML += "Duration:" + duration;
} else {
alert("Unable to find the distance via road.");
}
});
}
//=============== ~animation funcitons =====================
var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.
643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17
.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773
c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.6
25,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V2
7.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.33
6H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z";
var icon = {
path: car,
scale: .7,
strokeColor: 'white',
strokeWeight: .10,
fillOpacity: 1,
fillColor: '#404040',
offset: '5%',
// rotation: parseInt(heading[i]),
anchor: new google.maps.Point(10, 25) // orig 10,50 back of car, 10,0 front
of car, 10,25 center of car
};
/*********************************************************************\
*
*
* epolys.js
by Mike Williams *
* updated to API v3
by Larry Ross
*
*
*
* A Google Maps API Extension
*
*
*
* Adds various Methods to google.maps.Polygon and google.maps.Polyline *
*
*
* .Contains(latlng) returns true is the poly contains the specified *
*
GLatLng
*
*
*
* .Area()
returns the approximate area of a poly that is
*
*
not self-intersecting
*
*
*
* .Distance()
returns the length of the poly path
*
*
*
* .Bounds()
returns a GLatLngBounds that bounds the poly
*
*
*
* .GetPointAtDistance() returns a GLatLng at the specified distance *
*
along the path.
*
*
*
*
Reurns null if the path is shorter than that
*
*
*
* .GetPointsAtDistance() returns an array of GLatLngs at the
*
*
specified interval along the path.
*
*
*
*
*
* .GetIndexAtDistance() returns the vertex number at the specified
*
*
distance along the path.
*
*
*
*
Returns null if the path is shorter than that
*
*
*
* .Bearing(v1?,v2?) returns the bearing between two vertices
*
*
if v1 is null, returns bearing from first to last *
*
if v2 is null, returns bearing from v1 to next
*
*
*
*
*
***********************************************************************
*
*
* This Javascript is provided by Mike Williams
*
* Blackpool Community Church Javascript Team
*
* http://www.blackpoolchurch.org/
*
* http://econym.org.uk/gmap/
*
*
*
* This work is licenced under a Creative Commons Licence
*
* http://creativecommons.org/licenses/by/2.0/uk/
*
*
*
***********************************************************************
*
*
* Version 1.1
6-Jun-2007
*
* Version 1.2
1-Jul-2007 - fix: Bounds was omitting vertex zero *
*
add: Bearing
*
* Version 1.3
28-Nov-2008 add: GetPointsAtDistance()
*
* Version 1.4
12-Jan-2009 fix: GetPointsAtDistance()
*
* Version 3.0
11-Aug-2010 update to v3
*
*
*
\*********************************************************************/
// === first support methods that don't (yet) exist in v3
google.maps.LatLng.prototype.distanceFrom = function (newLatLng) {
var EarthRadiusMeters = 6378137.0; // meters
var lat1 = this.lat();
var lon1 = this.lng();
var lat2 = newLatLng.lat();
var lon2 = newLatLng.lng();
var dLat = (lat2 - lat1) * Math.PI / 180;
var dLon = (lon2 - lon1) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI /
180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = EarthRadiusMeters * c;
return d;
}
google.maps.LatLng.prototype.latRadians = function () {
return this.lat() * Math.PI / 180;
}
google.maps.LatLng.prototype.lngRadians = function () {
return this.lng() * Math.PI / 180;
}
// === A method which returns the length of a path in metres ===
google.maps.Polygon.prototype.Distance = function () {
var dist = 0;
for (var i = 1; i < this.getPath().getLength(); i++) {
);
}
return dist;
}
// === A method which returns a GLatLng of a point a given distance along the pa
th ===
google.maps.Polygon.prototype.GetPointAtDistance = function (metres) {
if (this.getPath().getLength() < 2) return null;
var dist = 0;
var olddist = 0;
for (var i = 1;
olddist = dist;
);
}
return null;
}
var m = (metres - olddist) / (dist - olddist);
return new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng()
+ (p2.lng() - p1.lng()) * m);
}
// === A method which returns an array of GLatLngs of points a given interval al
ong the path ===
google.maps.Polygon.prototype.GetPointsAtDistance = function (metres) {
var next = metres;
var points = [];
if (metres <= 0) return points;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength()); i++) {
olddist = dist;
);
while (dist > next) {
var p2 = this.getPath().getAt(i);
var m = (next - olddist) / (dist - olddist);
points.push(new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat())
* m, p1.lng() + (p2.lng() - p1.lng()) * m));
next += metres;
}
}
return points;
}
// === A method which returns the Vertex number at a given distance along the pa
th ===
google.maps.Polygon.prototype.GetIndexAtDistance = function (metres) {
var dist = 0;
var olddist = 0;
for (var i = 1;
olddist = dist;
);
}
return null;
}
return i;
}
// === Copy all the above functions to GPolyline ===
google.maps.Polyline.prototype.Distance = google.maps.Polygon.prototype.Distance
;
google.maps.Polyline.prototype.GetPointAtDistance = google.maps.Polygon.prototyp
e.GetPointAtDistance;
google.maps.Polyline.prototype.GetPointsAtDistance = google.maps.Polygon.prototy
pe.GetPointsAtDistance;
google.maps.Polyline.prototype.GetIndexAtDistance = google.maps.Polygon.prototyp
e.GetIndexAtDistance;
</script>
<table border="0" cellpadding="0" cellspacing="3">
<tr>
<td colspan="2">
Source:
<input type="text" id="txtSource" value="Bandra, Mumbai, India"
style="width: 200px" />
Destination:
<input type="text" id="txtDestination" value="Andheri, Mumbai, I
ndia" style="width: 200px" />
<br />
<input type="button" value="Get Route" onclick="GetRoute()" />
<hr />
</td>
</tr>
<tr>
<td colspan="2">
<div id="dvDistance">
</div>
</td>
</tr>
<tr>
<td>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</td>
<td>
<div id="dvPanel" style="width: 500px; height: 500px">
</div>
</td>
</tr>
</table>
<br />
</body>
</html>
="width: 500px; height: 500px">
</div>
</td>
</tr>
</table>
<br />
</body>
</html>

Reference

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Reference

Uploaded by

Copyright:

Available Formats

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.

step = 50; // 5; // metres

//=============== animation functions ======================

var duration = response.rows[0].elements[0].duration.text;

* .GetPointsAtDistance() returns an array of GLatLngs at the

var step = 50; // 5; // metres

//=============== animation functions ======================

dvDistance.innerHTML += "Distance: " + distance + "<br />";

You might also like