CODEWITHSUNDEEP
c#javascriptasp.net
NanGi
NanGi

Reputation: 69

google maps API v3 doen't respond

I'm new here. I'm trying to make an application that calculates distance and driving time between two adresses using google maps API.

My problem is that google DirectionsService() doesn't seem to respond. and I can't figure it out. I have been trying to figure it out for one week now.

I hope you guys can help. the problems seems to be in gmapApi.js

here is my code.
Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"           Inherits="_Default" %>

<!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 runat="server">
<title></title>
<script type="text/javascript">
    function postbackObj() {
        var orig = document.getElementById('<%= txbOrigin.ClientID %>').value;
        var dist = document.getElementById('<%= txbDestination.ClientID %>').value;
        var temp = showLocation(orig, dist);
        __doPostBack('gmAPIObj',temp);
    }
</script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">< /script>
    <script type="text/javascript" src="gmapApi.js"></script>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txbOrigin" Text="" runat="server" />
<asp:TextBox ID="txbDestination" Text="" runat="server" />
<asp:Button ID="btnSubmit" runat="server" Text="Search" OnClientClick="postbackObj()"/>    

<p>
    < asp:Label runat="server" ID="lblPrint" />
</p>

</div>
</form>

</body>
</html>

gmapApi.js

function showLocation(orig, dist) {
var directionService = new google.maps.DirectionsService();
var t = "";
var request = {
    origin: orig,
    destination: dist,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};


directionService.route(request, function (response, status) {
    if (status != google.maps.DirectionsStatus.OK) {
        alert(status + "  \nreq. failed.");
    }
    else {
        t = request.origin + ';' + request.destination + ';' +  response.routes[0].legs[0].distance.value + ';' + response.routes[0].legs[0].duration.value;
    }
});

return t;
}

the response variable is null and the status variable is emptystring in the directionService.route(request, function (response, status) I have tried to change to without lock. And I have tried to place the tags in the body tag without lock.

the rendered html code. 

<!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>
<script type="text/javascript">
    function postbackObj() {
        var orig = document.getElementById('txbOrigin').value;
        var dist = document.getElementById('txbDestination').value;
        var temp = showLocation(orig, dist);
        __doPostBack('gmAPIObj',temp);
    }
</script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="gmapApi.js"></script>

</head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MjMyMzMwNTZkZHxi8IJlhy7bL8nAZqZfL2Vh4Yr8uF80ja6jX9Ypc87B" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
    theForm.__EVENTTARGET.value = eventTarget;
    theForm.__EVENTARGUMENT.value = eventArgument;
    theForm.submit();
}
}
//]]>
</script>


<div class="aspNetHidden">

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"   value="/wEWBALsorucDwLTmobsAwK0weWLAwLCi9reA32PxME86E6mQhRTgBkF7cdktbiURIpf/IzKvAs5PHwI" />
</div>
<div>
<input name="txbOrigin" type="text" value="tilst" id="txbOrigin" />
<input name="txbDestination" type="text" value="aarhus" id="txbDestination" />
<input type="submit" name="btnSubmit" value="Search" onclick="postbackObj();" id="btnSubmit" />    

<p>
    <span id="lblPrint"></span>
</p>

</div>
</form>

</body>
</html>

thanks in advance.

Upvotes: 1

Views: 278

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

requesting the directionService is an asynchronous process, your variable t inside the function showLocation will not be modified by the call of directionService.route()

call __doPostBack('gmAPIObj',t) from within the successfull callback of directionService.route() instead.

function postbackObj() {
    var orig = document.getElementById('txbOrigin').value;
    var dist = document.getElementById('txbDestination').value;
    showLocation(orig, dist);
}

//-----

function showLocation(orig, dist) {
var directionService = new google.maps.DirectionsService();
var t = "";
var request = {
    origin: orig,
    destination: dist,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};


directionService.route(request, function (response, status) {
    if (status != google.maps.DirectionsStatus.OK) {
        alert(status + "  \nreq. failed.");
    }
    else {
        t = request.origin + ';' + request.destination + ';' +  response.routes[0].legs[0].distance.value + ';' + response.routes[0].legs[0].duration.value;
       __doPostBack('gmAPIObj',t);
    }
});
}

Upvotes: 2

Related Questions