Below is an example page which does that.
The functionality is commented inside the 'script' tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Geocoding Directions</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAnQbookkle8hxu22fQ6NbQhQjkNs2bAs_9Kr1eym0RcuS7Ni0VhQw6LZcRdCzOojjVAt8h8h2T0G6YA" type="text/javascript"></script>
<style type="text/css">
body {
font-family: Verdana, Arial, sans serif;
font-size: 11px;
margin: 2px;
}
table.directions th {
background-color:#EEEEEE;
}
img {
color: #000000;
}
</style>
<script type="text/javascript">
google.load('maps' , '2');
var map;
var gdir;
var geocoder = null;
function OnLoad() {
// declare our map
map = new GMap2(document.getElementById("map_canvas"));
// setting up the GDirections to load our directions
gdir = new GDirections(map, document.getElementById("directions"));
// we add an event listener to call a function when the response is ready from Google
GEvent.addListener(gdir, "load", onGDirectionsLoad);
// we request for directions
gdir.load("from: San Francisco to: San Mateo to: Mountain View");
}
function onGDirectionsLoad(){
// we make a loop to get the coordinates for all the cities
for (i=0;i<2;i++){
// 'route' will be the shortest route found by Google
var route = gdir.getRoute(i);
// 'nx' will be the starting coordinate for each segment
var nx=route.getStep(0).getLatLng();
// we now write on the page the coordinates found
document.getElementById('mydata').innerHTML+=nx+'<br/>';
}
// finally we add the final destination coordinate
document.getElementById('mydata').innerHTML+=route.getStep(1).getLatLng()+'<br/>';
}
google.setOnLoadCallback(OnLoad);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<h2>San Francisco - San Mateo - Mountain View</h2>
<br/>
<table class="directions">
<tr>
<td valign="top"> <b>Formatted Directions</b>
<div id="directions" style="width: 275px"></div>
<td>
<td valign="top"><b>Map</b>
<div id="map_canvas" style="width: 310px; height: 400px"></div><br/>
<td>
<td valign="top"><b>Coordinates for each city</b><div id="mydata" style="font-size:11px"></div></td>
</tr>
</table>
</body>
</html>
A live sample can be found here.
No comments:
Post a Comment