Route Mapping - Google Maps

Asked

Viewed 219 times

1

I’m having trouble making my way.

I have 2 inputs text, with google’s auto complete function.

When the user marks the second input. The map already plots the route between the two points.

But I want to make a modification, and I’m in trouble.

I want to trade the second point for several radios button.

Then the user will mark the radio button, and when type the location in the input text, it will trace the route automatically.

Here is the part of the code where he makes the auto complete of the field, and the route draw:

origin_autocomplete.addListener('place_changed', function() {
        var place = origin_autocomplete.getPlace();
        if (!place.geometry) {
            window.alert("Autocomplete's returned place contains no geometry");
            return;
        }
        expandViewportToFitPlace(map, place);

        // If the place has a geometry, store its place ID and route if we have
        // the other place ID
        origin_place_id = place.place_id;
        route(origin_place_id, destination_place_id, travel_mode, directionsService, directionsDisplay);
    });

    destination_autocomplete.addListener('place_changed', function() {
        var place = destination_autocomplete.getPlace();
        if (!place.geometry) {
            window.alert("Autocomplete's returned place contains no geometry");
            return;
        }
        expandViewportToFitPlace(map, place);

        // If the place has a geometry, store its place ID and route if we have
        // the other place ID
        destination_place_id = place.place_id;
        route(origin_place_id, destination_place_id, travel_mode, directionsService, directionsDisplay);
    });

    function route(origin_place_id, destination_place_id, travel_mode,directionsService, directionsDisplay) {
        if (!origin_place_id || !destination_place_id) {
            return;
        }
        directionsService.route({
            origin: {'placeId': origin_place_id},
            destination: {'placeId': destination_place_id}, travelMode: travel_mode
        }, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });
    }

I take the position of the radio button like this:

positionMarkerSelected = markersArray[indiceAux].getPosition();

And I tried to replace it directly in the function that plots the route:

directionsService.route({
                origin: {'placeId': origin_place_id},
                destination: positionMarkerSelected ,   travelMode: travel_mode
            }

But it doesn’t work, someone knows how to fix it ?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.