Why doesn't Google Maps build a route between two points?

A

Arthur2019-05-23 11:21:24

JavaScript

Arthur, 2019-05-23 11:21:24

I just started using the Google Maps API and I want to make 2 textboxes where I specify the start and end points. I can't get it right in JS .
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Google Maps</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="floating-panel">
        <label for="sityname-start">Название начального города: </label>
        <input type="text" name="sityname-start" id="sityname-start" />
        <label for="sityname-end">Название конечного города: </label>
        <input type="text" name="sityname-end" id="sityname-end" />
        <input id="button" type="button" value="Рассчитать" />
    </div>

    <section id="map"></section>

    <script src="js/main.js" defer></script>
    <script src="https://maps.googleapis.com/maps/api/js?key={MY_API_KEY}&callback=initMap" defer></script>
</body>
</html>

CSS:

#map {
    height: 100vh;
}

#floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
}

input[type="button"] {
    cursor: pointer;
}

JavaScript:

function initMap() {

    var coords = {lat: 46.9704762, lng: 31.9852023},
    container = document.getElementById('map'),
    content = container.innerHTML,
    directionsService = new google.maps.DirectionsService,
    directionsDisplay = new google.maps.DirectionsRenderer,
    map = new google.maps.Map(container, {
        center: coords,
        zoom: 14
    });

    infowindow = new google.maps.InfoWindow({
        content: content
    });

    // Apply new JSON when the user selects a different style.
    styleSelector.addEventListener('change', function() {
        map.setOptions({styles: styles[styleSelector.value]});
    });

    var onChangeHandler = function() {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
    document.getElementById('button').addEventListener('click', onChangeHandler);
    // document.getElementById('sityname-end').addEventListener('click', onChangeHandler);
    directionsDisplay.setMap(map);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
        origin: document.getElementById('sityname-start').value,
        destination: document.getElementById('sityname-end').value,
        travelMode: 'DRIVING'
    }, function(response, status) {
        if (status === 'OK') {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

The first time I used a list in which I select two points and the map builds a route. And when I try through text fields, does not work.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

0

0xD34F, 2019-05-23
@ApTyP_93

But you have a certain styleSelector - what's that? Unclear. I do not see that this thing is declared somewhere - and you are trying to addEventListener to it. Here is the code and it crashes before the click handler is connected to initiate the route building.