Размещение переменных в карте Google Сценарий тега

Question

Я пытаюсь поместить карту направления Google на свою страницу. Элемент JS определяется следующим образом. На данный момент это жестко закодировано, но мне нужно, чтобы происхождение (Майами, Флорида), пункт назначения (Буффало, Нью-Йорк) и путевые точки были динамическими. Я получаю строки местоположения от Json из back-end, используя http.get углового.

Мой вопрос: как я могу заставить источник, пункт назначения и путевую точку быть динамическими?

<script> 
    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 41.85, lng: -87.65}, 
    scrollwheel: false, 
    zoom: 7 
    }); 

    var directionsDisplay = new google.maps.DirectionsRenderer({ 
    map: map 
    }); 

    // Set destination, origin and travel mode. 
    var request = { 
    destination: "Miami, FL", 
    origin: "Buffalo, NY", 
    travelMode: google.maps.TravelMode.DRIVING, 
    waypoints: [ 
    { 
     location:"Richmond, VA", 
     stopover:true 
    },{ 
     location:"Washington, DC", 
     stopover:true 
    }], 
}; 

var directionsService = new google.maps.DirectionsService(); 

directionsService.route(request, function(response, status) { 
if (status == google.maps.DirectionsStatus.OK) { 
    directionsDisplay.setDirections(response); 
    } 
}); 
} 
</script> 

Answer 1

Приведен пример массива JSON. В этом примере массив объявляется в области js, но вы должны получить доступ к вам массивом по-другому, я бы предположил с помощью ajax. В обоих направлениях вы будете упорядочивать остальную часть кода по мере необходимости.

Объявление массива:

var placesJSON = 
    [ 
{ 
    "location":"Richmond, VA", 
     stopover:true 

}, 
    { 
     "location":"Washington, DC", 
     "stopover":true 

    }, 
    { 
     "location":"Atlanta", 
     "stopover":true 

    } 
    ]; 

динамические переменные:

var request = { 
    destination: "Miami, FL", 
    origin: "Buffalo, NY", 
    travelMode: google.maps.TravelMode.DRIVING, 
    waypoints: [ 
    { 
     location:placesJSON[0].location, 
     stopover:placesJSON[0].stopover 
    },{ 
     location:placesJSON[2].location, 
     stopover:placesJSON[2].stopover 
    }], 
}; 

Вот скрипку пример: https://jsfiddle.net/eugensunic/45n45cpd/1/

Если вы хотите получить доступ к вам JSON массив конкретным именем (не по индексу). Затем я предлагаю провести цикл через массив и создать оператор if, например

if(desired_destination== placesJSON[index].location){// select this places} 

, чтобы подтвердить ваш запрос.