Click here to Skip to main content
15,031,219 members
Please Sign up or sign in to vote.
4.50/5 (2 votes)
See more:
Below has my aspx code in which I am displaying a map and wanted to show the route between source and destination. I don't know where I am going wrong, Button click event doesn't give the route.

Could anyone help me

Code:
<pre lang="xml"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

       <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(13.052413900000, 80.25082459999),
                zoom: 15,
                minZoom: 3,
                streetViewControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            var fromText = document.getElementById('start');
            var fromAuto = new google.maps.places.Autocomplete(fromText);
            fromAuto.bindTo('bounds', map);
            //Find To location
            var toText = document.getElementById('end');
            var toAuto = new google.maps.places.Autocomplete(toText);
            toAuto.bindTo('bounds', map);
            directionsDisplay.setMap(map);
        }

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



        google.maps.event.addDomListener(window, 'load', initialize);


  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

       <div id="map_canvas" style="height:350px";></div>
                        <input  type="text" placeholder="Source" name="start" id="start">
                        <br />
                                <input  type="text" placeholder="Source" name="end" id="end">
                           <input id="Button1" type="button" value="button" onclick="calcRoute()"  />


 </div>


    </form>
</body>
</html>
Posted
Comments
Sampath Lokuge 27-Apr-14 3:21am
   
Are there any errors or what ? Have you used any articles to do that task ?
Naren24091990 27-Apr-14 3:47am
   
Sampath

There are no error!! I tried it based on looking at the google documents. Callroute functions is also being called I used an alert box inside the fuction to check it.

I don't know why am i not getting the route.
Naren24091990 27-Apr-14 4:06am
   
I tried your below solution, route is not coming.
Sampath Lokuge 27-Apr-14 4:12am
   
Check whether are there any js errors on your js file by using chrome dev tools ?
Naren24091990 27-Apr-14 4:29am
   
There are no errors.

This is the article I referred instead of drop down list I am using auto complete text box
https://developers.google.com/maps/documentation/javascript/examples/directions-simple
Sampath Lokuge 27-Apr-14 7:29am
   
Have you tried their code snippet with drop down box ?
Sampath Lokuge 27-Apr-14 7:55am
   
I have fixed your issue.Please check the below solution.

1 solution

Your code snippet had lots of issues.So I have fixed them all and now it's working. :)
The only thing what you have to do is complete the functionality of the auto complete text box. Except that all are working fine.Please check that.

XML
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script type="text/javascript">
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

        function initialize() {

            directionsDisplay = new google.maps.DirectionsRenderer();
            var chicago = new google.maps.LatLng(41.850033, -87.6500523);
            var mapOptions = {
                zoom: 7,
                center: chicago
            }
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            directionsDisplay.setMap(map);
        }

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

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>

</head>
<body>
    <input type="text" placeholder="Source" name="start" id="start">
    <input type="text" placeholder="Source" name="end" id="end">
    <input id="Button1" type="button" value="button" onclick="calcRoute()" />
    <div id="map-canvas"></div>
</body>
</html>
   
v4
Comments
DamithSL 5-Jun-14 9:55am
   
my5! :)
Sampath Lokuge 5-Jun-14 9:58am
   
Thanks DamithSL. :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900