Google Directions Error: request is not defined_问答_开发者

I'm using directions for Google Maps V3 API. However I get the javscript error when i run it: Uncaught ReferenceError: request is not defined

This is my JS code:

 <script type="text/javascript">

    var directionDisplay; //NEW CODE

    var directionsService = new google.maps.DirectionsService(); //NEW CODE

    function initialize() {

    directionsDisplay = new google.maps.DirectionsRenderer(); //NEW CODE

    var latlng = new google.maps.LatLng(1.288693,103.846733);

    var options = {  

        zoom: 16,  

        center: latlng,  

        mapTypeId: google.maps.MapTypeId.ROADMAP,

        scrollwheel: true

    }; 

    var map = new google.maps.Map(document.getElementById('map_canvas'), options);  

        directionsDisplay.setMap(map);

        marker1 = new google.maps.Marker({  

            position: new google.maps.LatLng(1.288693,103.846733),

            map: map

        }); 

        marker2 = new google.maps.Marker({  

            position: new google.maps.LatLng(1.288693,103.846733),

            map: map

        }); 

        google.maps.event.addListener(marker1, "mouseover", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");

        });

        google.maps.event.addListener(marker1, "mouseout", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");

        });

        google.maps.event.addListener(marker1, "click", function(event) {

            window.location = "http://localhost/yupsg/places/display/111";

        });

        google.maps.event.addListener(marker2, "mouseover", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");

        开发者_StackOverflow社区});

        google.maps.event.addListener(marker2, "mouseout", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");

        });

        google.maps.event.addListener(marker2, "click", function(event) {

            window.location = "http://localhost/yupsg/places/display/111";

        });

        var LatLngList = [

        new google.maps.LatLng(1.288693,103.846733),

        new google.maps.LatLng(1.288693,103.846733)

        ];

    }



        function changeMarkerOnmouseover(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");

        }

        function changeMarkerOnmouseout(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");

        }



        function changeMarkerOnmouseover(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");

        }

        function changeMarkerOnmouseout(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");

        }

                        //NEW CODE FOR NEW FUNCTION
        function calcRoute() {

            var start = "35 Oxford Street, Cambridge, MA 02138";

            var end = "24 Oxford Street, Cambridge, MA 02138";

            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>

You are defining request inside the scope of calcRoute() but then trying to use it outside immedately afterwards outside of calcRoute(). Define it in the same scope where you will use it.

It appears that there might be a few other errors in there too. Here's the end result of my trying to make minimal edits to get your code to work. Hope it helps!

<html>
<head>
<title>Maps Test</title>
<script type="application/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head>
<body>
<h1>Map</h1>
<div id="map_canvas" style="height:100%; width:100%;"></div>
<script type="text/javascript">

    var directionsDisplay; //NEW CODE

    var directionsService = new google.maps.DirectionsService(); //NEW CODE

    directionsDisplay = new google.maps.DirectionsRenderer(); //NEW CODE

    var latlng = new google.maps.LatLng(1.288693,103.846733);

    var options = {  

        zoom: 16,  

        center: latlng,  

        mapTypeId: google.maps.MapTypeId.ROADMAP,

        scrollwheel: true
    }; 


    var map = new google.maps.Map(document.getElementById('map_canvas'), options);  

        directionsDisplay.setMap(map);

        marker1 = new google.maps.Marker({  

            position: new google.maps.LatLng(1.288693,103.846733),

            map: map

        }); 

        marker2 = new google.maps.Marker({  

            position: new google.maps.LatLng(1.288693,103.846733),

            map: map

        }); 

        google.maps.event.addListener(marker1, "mouseover", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");

        });

        google.maps.event.addListener(marker1, "mouseout", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");

        });

        google.maps.event.addListener(marker1, "click", function(event) {

            window.location = "http://localhost/yupsg/places/display/111";

        });

        google.maps.event.addListener(marker2, "mouseover", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");

        });

        google.maps.event.addListener(marker2, "mouseout", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");

        });

        google.maps.event.addListener(marker2, "click", function(event) {

            window.location = "http://localhost/yupsg/places/display/111";

        });

        var LatLngList = [

        new google.maps.LatLng(1.288693,103.846733),

        new google.maps.LatLng(1.288693,103.846733)

        ];




        function changeMarkerOnmouseover(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");

        }

        function changeMarkerOnmouseout(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");

        }



        function changeMarkerOnmouseover(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");

        }

        function changeMarkerOnmouseout(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");

        }


            var start = "35 Oxford Street, Cambridge, MA 02138";

            var end = "24 Oxford Street, Cambridge, MA 02138";

            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>
</body>
</html>