asked on

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

Gautham Janardhan

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

doramail05

ASKER

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

ASKER CERTIFIED SOLUTION

Gautham Janardhan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial