Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 389
  • Last Modified:

google api for address and distance from locations

notice when using the google api for asp.net,

it will display directionpanel which will state the km from source to destination,

im not sure how to get just the km value from the directionpanel div, coming from one city to another.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Addressbar.aspx.cs" Inherits="Addressbar" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script language="javascript" type="text/javascript">
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();

    function InitializeMap() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions =
        {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directionpanel'));

        var control = document.getElementById('control');
        control.style.display = 'block';


    }



    function calcRoute() {

        var start = document.getElementById('startvalue').value;
        var end = document.getElementById('endvalue').value;
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

    }



    function Button1_onclick() {
        calcRoute();
    }

    window.onload = InitializeMap;
    </script>
    
<table id ="control">
<tr>
<td>
<table>
<tr>
<td>From:</td>
<td>
    <input id="startvalue" type="text" style="width: 305px" /></td>
</tr>
<tr>
<td>To:</td>
<td><input id="endvalue" type="text" style="width: 301px" /></td>
</tr>
<tr>
<td align ="right">
    <input id="Button1" type="button" value="GetDirections" onclick="return Button1_onclick()" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign ="top">
<div id ="directionpanel"  style="height: 390px;overflow: auto" ></div>
</td>
<td valign ="top">
<div id ="map" style="height: 390px; width: 489px"></div>
</td>
</tr>
</table>
</asp:Content>

Open in new window

0
doramail05
Asked:
doramail05
  • 2
1 Solution
 
Gautham JanardhanCommented:
try this.
function calcRoute() {

            var start = document.getElementById('startvalue').value;
            var end = document.getElementById('endvalue').value;
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    alert(response.routes[0].legs[0].distance.value);
                    alert(response.routes[0].legs[0].distance.text);
                    directionsDisplay.setDirections(response);
                }
            });

        }

Open in new window

0
 
doramail05Author Commented:
hi gautham,

                trying to display the response.route to asp.net label in the form, by using this :

 document.getElementById("lbldistance").innerhtml = response.routes[0].legs[0].distance.text;

seems that it does not show value in asp.net label
0
 
Gautham JanardhanCommented:
document.getElementById("lbldistance").value = response.routes[0].legs[0].distance.text;

Open in new window

0

Featured Post

NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now