1

I have to use Google Maps Distance Matrix API https://developers.google.com/maps/documentation/distance-matrix/intro to calculate the distance between two points with some coordinates. I use AngularJS and $http.jsonp() method to perform a request to the API:

var app = angular.module('delivery', []);
app.controller('deliveryCtrl', function ($scope, $http) {
    $scope.submit = function () {
            var googleStr = 'https://maps.googleapis.com/maps/api/distancematrix/json?&origins=';
            var fromPlace = autocompleteFrom.getPlace();
            googleStr += fromPlace.geometry.location.lat() + ',' + fromPlace.geometry.location.lng();
            googleStr += "&destinations="
            var toPlace = autocompleteTo.getPlace();
            googleStr += toPlace.geometry.location.lat() + ',' + toPlace.geometry.location.lng();
            googleStr +='&key='+ apiKey+'&callback=JSON_CALLBACK';

            $http.jsonp(googleStr).success(function (data) {
                console.log(data);
            }).error(function (data) {
                $scope.error = true;
            });
    }
});

I get a response with status 'OK', but can`t handle it due to the next error: enter image description here

How can I solve it? Thanks in advance for help

Wolf Larsen
  • 105
  • 6

1 Answers1

1

The link you provided gives you two options for the API output, JSON and XML. Neither of those is JSONp. In order to use JSONp, the API must allow and support it.

If you want to use the API, you'll need to proxy the call via CORS or JSONp yourself. The following answer will likely help you:
Loading cross domain endpoint with jQuery AJAX

Community
  • 1
  • 1
John Green
  • 13,241
  • 3
  • 29
  • 51