<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
<title>Distance Test Page</title>
</head>
<body onload="" onunload="GUnload()">
<form id="form1" runat="server">
<div>
<table width="100%">
<tr>
<td>
<asp:TextBox ID="addr1" runat="server" Text="2688 Shell Road, Richmond, BC" Width="588px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="addr2" runat="server" Text="2274 East 48th Ave, Vancouver, BC" Width="588px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btn" runat="server" Text="Calculate" OnClientClick="calculateDistance(document.getElementById('addr1').value,document.getElementById('addr2').value,1,document.getElementById('result'));" />
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="result" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr>
<td>
<input id="btnShow" type="button" value="Show Map" onclick="initializeByCar('map_canvas','route',document.getElementById('addr1').value,document.getElementById('addr2').value,'result');" />
</td>
</tr>
<tr>
<td>
<div id="map_canvas" style="width: 70%; height: 500px; float:left; border: 1px solid black;"></div>
<div id="route" style="width: 25%; height:500px; float:right; border:1px solid black;"></div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
var map;
var directionsPanel;
var directions;
var resultCtrl;
function initializeByCar(MapPanelID,directionsPanelID,addr1,addr2,resultCtrlID)
{
if (GBrowserIsCompatible())
{
resultCtrl = document.getElementById(resultCtrlID);
map = new GMap2(document.getElementById(MapPanelID));
map.setCenter(new GLatLng(42.351505,-71.094455), 15);
directionsPanel = document.getElementById(directionsPanelID);
directions = new GDirections(map, directionsPanel);
//directions = new GDirections(null,null);
GEvent.addListener(directions,"load", set_distance);
directions.load("from: " + addr1 + " to: " + addr2 + " ");
}
}
function set_distance()
{
if(directions.getDistance() != null && directions.getDistance() != "undefined")
{
resultCtrl.value = directions.getDistance().meters;
}
}