Angular.js googleMap API json Uncaught SyntaxError: Unexpected token :

Question

I red all previous posts: * i added : &callback=JSON_CALLBACK * i also tried simple $http.get but it leads to: 'Access-Control-Allow-Origin' * i also tried to define jsonpCallbackParam to'json_callback' from just callback and added format: 'jsonp' *also tried to read documentation about $sce.trustAsResourceUrl(url) (well i didn't understand much :-( On F12 -> source, i see that the required data is returned but on the console log i get Uncaught SyntaxError: Unexpected token .

please advise

var autoJsonpUrl = 'https://maps.googleapis.com/maps/api/distancematrix/json?region=il&origins=tel-aviv&destinations=jerusalem&key=AIzaSyD3xhn92KwStkZAg-rZueAFI1LooRLpND0' + '&callback=JSON_CALLBACK';

var options =
{
     jsonpCallbackParam: 'json_callback',
     cache: false
};

$http.jsonp(autoJsonpUrl, options).then(function (response) {
    console.log(response); 
});

Vadim Gremyachev · Accepted Answer · 2017-02-06 10:56:22Z

1

Endpoint http://maps.googleapis.com/maps/api/distancematrix/ does not support JSONP, instead you could consider to utilize Google Maps JavaScript API as demonstrated below:

angular.module('mapApp', [])

    .controller("mapCtrl", function ($scope, $http) {
        $scope.routeInfo = null;
        var distanceMatrix = new google.maps.DistanceMatrixService();
        var distanceRequest = { region: "il", origins: ["tel-aviv"], destinations: ["jerusalem"], travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC};
        distanceMatrix.getDistanceMatrix(distanceRequest, function (response, status) {
            if (status != google.maps.DistanceMatrixStatus.OK) {
                console.log('An error occured: ' + status);
            }
            else {
                $scope.$apply(function(){
                   $scope.routeInfo = response;    
                });
                
            }
        });
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="app.js"></script>

<div ng-app="mapApp" ng-controller="mapCtrl">
    <pre>{{routeInfo | json}}</pre>
</div>

answered Feb 6, 2017 at 10:56

Vadim Gremyachev

59.6k21 gold badges139 silver badges205 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tomersss2 Over a year ago

Hey thanks for ur reply but in order to check it i need to know where should i insert my API-KEY, can u please direct me where in the code shell i do so?

Vadim Gremyachev Over a year ago

@LifeLess, here we go <script src="https://maps.google.com/maps/api/js?key=--YOUR KEY GOES HERE--"></script>

tomersss2 Over a year ago

Ok, do u know now how i activate the map error referring to the current error: API error: ApiNotActivatedMapError

Vadim Gremyachev Over a year ago

@LifeLess, that should do the trick

Collectives™ on Stack Overflow

Angular.js googleMap API json Uncaught SyntaxError: Unexpected token :

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related