ApTyP_93
@ApTyP_93
Начинающий Web-разработчик

Почему не строит маршрут Google Maps между двумя точками?

Я только начал пользоваться API Гугл-карты и хочу сделать 2 текстовых поля, в которых указываю начальную и конечную точки. Не могу правильно прописать это в 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);
        }
    });
}


Первый раз я использовал список, в котором выбираю две точки и карта строила маршрут. А когда пробую через текстовые поля, не работает.
  • Вопрос задан
  • 158 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
А вот есть у вас некий styleSelector - это что? Непонятно. Не вижу, чтобы эта штука где-то объявлялась - а вы ей пытаетесь addEventListener сделать. Вот код и падает с ошибкой, до того, как подключается обработчик клика, инициирующий построение маршрута.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы