Как получить JSON из API Google Directions с помощью jQuery?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<script>
APIKEY = "xxxxxxxxx";
requestURL = "https://maps.googleapis.com/maps/api/directions/json?origin=Brooklyn&destination=Queens&mode=transit&key=" + APIKEY + "callback=?";

$.ajax({
            url: requestURL, 
            type: "GET",   
            dataType: 'jsonp',
            cache: false,
            success: function(response){                          
                alert(response);                   
            }           
        }); 
</script>

</body>
</html>

Прямо сейчас это возвращает ошибку:

https://maps.googleapis.com/maps/api/directions/json?origin=Brooklyn&destin…=Queens&mode=driving&key=[APIKEYHERE]&callback=?
maps.googleapis.com/maps/api/directions/json?origin=Brooklyn&destination=Qu…l7pA&callback=jQuery1102013888467964716256_1429822392524&_=1429822392525:2 Uncaught SyntaxError: Unexpected token :

Я не могу понять, как заставить его работать. Ключ API в настоящее время является ключом API браузера.


google-maps google-maps-api-3 directions
person eithel    schedule 23.04.2015    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Вы не можете использовать ajax для доступа к API карт Google. Это даст вам неизвестную ошибку, но на самом деле это «доступ запрещен» из-за CORS. Приведенный ниже код предоставит вам достоверные данные для маршрута между Бруклином и Квинсом, вождения, в метрических единицах.

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
        var directionsService = new google.maps.DirectionsService();
        var directionsRequest = {
            origin: "brooklyn",
            destination: "queens",
            travelMode: google.maps.DirectionsTravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC
        };
        directionsService.route(directionsRequest, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {                    
            //do work with response data
            }
            else
                //Error has occured
        })

ссылка: http://www.sitepoint.com/find-a-route-using-the-geolocation-and-the-google-maps-api/

person imGreg    schedule 27.04.2015

arrow_upward
1
arrow_downward

Веб-служба направлений не поддерживает JSONP (или CORS).

Если вы хотите запросить услугу на стороне клиента, вы должны загрузить maps-Javascript-API и использовать API-методы, см. https://developers.google.com/maps/documentation/javascript/directions для получения дополнительной информации.

person Dr.Molle    schedule 23.04.2015

arrow_upward
1
arrow_downward

Вы делаете это правильно! У меня такая же ошибка. Единственное, что вам нужно изменить, это тип данных с jsonp на json, потому что API Google возвращает его в формате json, а не jsonp. Вот почему вы получаете эту ошибку.

person redneckProgrammer    schedule 07.11.2015