The error setDirection of undefined does not disappear.

This site
http://wataame.sumomo.ne.jp/archives/6905
http://mizuame.sakura.ne.jp/blog_sample/googlemap/index6.html
When I was creating an application that allows me to search for routes between two points, I received the following error

cannot read property setDirections of undefined

setDirection is undefined, but I don't know the cause yet.The following comments were posted on Google's developer site:

The DirectionsResult contains the result of the directions query, which you may either handle yourself, or pass to a DirectionRender object, which can automatically handle displaying the result on a map.

To display a DirectionResult using a DirectionRender, you simply need to do the following:

1. Create a DirectionRender object.
2.Call setMap() on the render to bind it to the passed map.
3. Call setDirection() on the render, passing it the DirectionsResult as noted above.Because the render is an MVCObject, it will automatically detect any changes to its properties and update the map when associated directions have changed.

If you know the cause of the error, please let me know.

<!DOCTYPE html>
<html lang="ja">
<head>
    <metacharset="UTF-8">
    <title>two point route search</title>
    <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key = AIzaSyBouRngjBWxP4S7H1wqfShSsPkserg0xBw">/script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
    #map_canvas{
        margin:0;
        padding:0;
        margin-bottom:1em;
        height —550px;
    }

</style>
</head>
<body>
    <divid="content">
        <h2>Find a route between two points</h2>
        <form action="method="post">
            <p><span class="bold">Search by address/place name</span>/p>
            Brgin: <input type="text" name="sp" id="inputBegin">
            End: <input type="text" name="ep" id="inputEnd">
            <input type="submit" name="register" value="search" id="searchButton">
        </form>
    </div>

    <divid="map_canvas"></div>
    <divid="directionPanel"></div>


<script>
varmap, begin, end;
var directionsDisplay;
var directionsService;

begin = 'Tokyo Station';
end='Tokyo Skytree';

$(function(){
    $('#searchButton').click(function(e){
        e.preventDefault(); // href is disabled and screen transitions are not performed

        begin=$('#inputBegin').val();
        end=$('#inputEnd') .val();

        // Clear route description
        $('#directionPanel').text(' ');

        google.maps.event.addDomListener(window, 'load', initialize(begin, end));
        google.maps.event.addDomListener(window, 'load', calcRoute(begin, end));
    });
});


function initialize (begin, end) {
    // instance [geocoder] creation
    vargeocoder=new google.maps.Geocoder();

    geocoder.geocode({
        // Origin Keywords
        'address': begin

    }, function(result, status){
        if(status==google.maps.GeocoderStatus.OK){
            // Specify a center point
            var latlng = result[0].geometry.location;

            // option
            varmyOptions={
                zoom:14,
                center —latlng,
                scrollwheel: false, // wheel zoom
                mapTypeId: google.maps.MapTypeId.ROADMAP,
            };

            // # Get map_canvas and create a map instance ([map]) of the contents of [mapOptions]
            map = new google.maps.Map( document.getElementById('map_canvas', myOptions);

            // Get Path
            directionsDisplay = new google.maps.DirectionRender();
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel( document.getElementById('directionPanel')); // Route Details

            // place
            // $('#begin').text(begin);
            // $('#end').text(end);

        } else{
            alert('Unable to retrieve…'');
        }
    });
}

// route acquisition
function calcRoute(begin,end){

    var request = {
        origin —begin, // Start point
        destination:end, // end point
        travelMode:route in google.maps.TravelMode.DRIVING, // [automobile]
        voidHighways:true, // expressway usage flag
    };

    // instance creation
    directionsService=newgoogle.maps.DirectionService();

    directionsService.route(request, function(response, status){
        if(status==google.maps.DirectionStatus.OK){
            directionsDisplay.setDirection(response);
        } else{
            alert('Route not found...');
        }
    });
}

// kick
google.maps.event.addDomListener(window, 'load', function(){
    initialize (begin, end);
    calcRoute (begin, end);
});
</script>
</body>
</html>

javascript css html5 google-maps

2022-09-30 14:24

1 Answers

cannot read property setDirections of undefined

This error does not mean that setDirections is undefined, but directionsDisplay is undefined.

directionsDisplay is still in the undefined state when you call calcRoute() because directionsDisplay initializes asynchronously (after waiting for geocode communication results).

Therefore, it might work if you change the calling location of calcRoute() to call geocoder.geocode() after initializing directionsDisplay.

2022-09-30 14:24

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656