CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3driving-directions
Aquarius_Girl
Aquarius_Girl

Reputation: 22906

Route doesn't get displayed Google Maps API V3

For the simplicity sake I have put the code for displaying the map and the route in the function "initialize". The Map IS getting displayed, but the route is not. Please point out the error.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

    <script type="text/javascript"> 

        var map;
        var latlng = new google.maps.LatLng (-34.397, 150.644);

        var directionsDisplay = new google.maps.DirectionsRenderer ();;
        var directionsService = new google.maps.DirectionsService ();

        function initialize ()
        {
            var myOptions = 
            {
                zoom:8,
                center:latlng,
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map (document.getElementById ("map"), myOptions);

            directionsDisplay.setMap (map);

            var initialPoint             = latlng;

            var latlng2 = new google.maps.LatLng (-34.400, 150.744);
            var pointAfterDragging       = latlng2;

            var start = initialPoint;
            var end   = pointAfterDragging;

            var request = {
                        origin:start,
                        destination:end,
                        travelMode:google.maps.TravelMode.DRIVING
                        };


            directionsService.route (request, 
                                function (result, status) 
                                {
                                    if (status == google.maps.DirectionsStatus.OK)
                                    {
                                        directionsDisplay.setDirections (result);
                                    }
                                });
            }

        </script> 
    </head>
    <body onload="initialize()" onunload="GUnload()" topmargin="0" leftmargin="0">
    <div id="map" style="width: 341px; height: 271px"></div>
    <div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
    </body>
    </html>

Upvotes: 0

Views: 1821

Answers (1)

Kasper Vesth
Kasper Vesth

Reputation: 4113

You have two problems.

First there is no method defined called GUnload.

Second, the directions you are trying to get returns ZERO_RESULTS. You can always try to alert status to see whether it returns any directions. If it doesn't nothing will be shown.

You should try with some other locations instead and it should be fine. You can also pass it addresses instead of latlng's if you want to try that instead :)

To alert the status you could do this:

directionsService.route (request, 
                            function (result, status) 
                            {
                                alert(status);
                                if (status == google.maps.DirectionsStatus.OK)
                                {

                                    directionsDisplay.setDirections (result);
                                }
                            });
        }

Upvotes: 1

Related Questions