Google Maps Направление API с AJAX

Question

Я работаю над небольшим веб-сайтом, который использует ajax и API карт Google для загрузки маршрутов. У меня есть БД, в которой хранятся лат-лонги нескольких мест, и при выборе одного из выпадающего списка серверу выполняется асинхронный вызов и возвращается массив JSON. Я вызываю свою функцию showPosition каждый раз, когда выполняется асинхронный вызов.

xmlhttp.onreadystatechange = function() {
                if(this.readyState == 4 && this.status == 200) {
                    myObj = JSON.parse(this.responseText);
                    console.log(myObj[0].lat);
                    console.log(this.responseText);
                    showPosition(myObj);
                }
            };

showPosition должно отображать карту с указаниями.

<script language="JavaScript">
    var mapholder = document.getElementById("mapholder");



    function showPosition(myObj) {
        //Getting all the coorindates
        console.log(myObj);
        fromDirectionLat = myObj[0].lat;
        fromDirectionLong = myObj[0].long;
        toDirectionLat = myObj[1].lat;
        toDirectionLong = myObj[1].long;

        //Setting mapholder style
        mapholder.style.height = '600px';
        mapholder.style.width = '600px';
        mapholder.style.border = 'medium solid #555555';
        var myOptions = {
            center: latlong,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            }
        };


        var directionService = new google.maps.DirectionsService;
        var directionDisplay = new google.maps.DirectionRenderer;
        var map = new google.maps.Map(document.getElementById('mapholder'), myOptions);
        directionDisplay.setMap(map);

        var onChangeHandler = function() {
            displayRoute(directionService, directionDisplay);
        }

        function displayRoute(directionService, directionDisplay) {
            var originF = new google.maps.LatLng(fromDirectionLat, fromDirectionLong);
            var destinationT = new google.maps.LatLng(toDirectionLat, toDirectionLong);
            direcionsService.route({
                origin: originF,
                destination: destinationT,
                travelMode: 'DRIVING'
            },
                function (response, status) {
                if(status == 'OK')
                    directionDisplay.setDirections(response);
                else
                    window.alert("failed");
            }) ;

        }


    }
</script>

В моей консоли я получаю следующую ошибку

ReferenceError: latlong is not defined Ajax:93:17
    showPosition http://localhost:8888/Ajax/:93
    onreadystatechange http://localhost:8888/Ajax/:37

Я совершенно озадачен тем, что именно происходит. Я совершенно новичок в этом.

Answer 1

Вы используете переменную, которая нигде не определена

center: latlong

latlong не существует нигде в вашей функции. Вы должны определить его в центре карты, которую вы хотите отобразить

var latlong = new google.maps.LatLng(your_center_lat, your_center_long)

или

center: new google.maps.LatLng(your_center_lat, your_center_long)

Определение центра зависит от вас:)