I am currently working on integrating the Google Maps Distance Matrix API into my project to calculate distances between two points using specific coordinates. My implementation involves AngularJS and the $http.jsonp() method to make requests 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;
});
}
});
Although I receive a response with status 'OK', I encounter an issue while trying to handle it which leads to the following error: https://i.sstatic.net/5gL8Y.png
I am seeking advice on how to resolve this issue. Any help would be greatly appreciated. Thank you in advance.