<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=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('txtDestination')); directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true }); }); function GetRoute() { //*********DIRECTIONS AND ROUTE**********************// source = document.getElementById("txtSource").value; destination = document.getElementById("txtDestination").value; var request = { origin: source, destination: destination, travelMode: google.maps.TravelMode.DRIVING }; //*********DISTANCE AND DURATION**********************// var service = new google.maps.DistanceMatrixService(); var dvDistance = document.getElementById("dvDistance"); 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.rows[0].elements[0].status != "ZERO_RESULTS") { var distance = response.rows[0].elements[0].distance.text; var duration = response.rows[0].elements[0].duration.text; dvDistance.innerHTML = ""; dvDistance.innerHTML += "" + distance + ""; var MyDiv1 =document.getElementById("dvDistance"); document.getElementById("HiddenField1") = MyDiv1; alert(dvDistance); } else { alert("Unable to find the distance via road."); } }); } </script> <body> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <table> <tr> <td> Source : <input type="text" id="txtSource" style="width:200px" /> </td> <td> Destination : <input type="text" id="txtDestination" style="width:200px" /> </td> </tr> <tr><td><div id="dvDistance"> </div></td> <td> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode=Conditional> <ContentTemplate> <asp:button id="Button1" runat="server" onclientclick = "GetRoute();" text="Button" onclick="Button1_Click" /></td> </ContentTemplate> </asp:UpdatePanel> </td> </tr> <tr> <td><asp:hiddenfield id="HiddenField1" runat="server"/></td> </tr> </table> <input type="hidden" name="name" id="distance" value=" " /> </body> </html> |