$http.get and $http.JSONP failed to get the google api response

Question

I tried to get api response for "http://maps.google.com/maps/api/geocode/json?address=Canada&sensor=true&region=USA" using angularjs $http .get method and $http.JSONP method. But it doesnt work properly it returns nothing. When i tried this api via REST client and browser , it provides the JSON data with status code 200.

Here is my code ... index.html

<html ng-app="myApp">
<body ng-controller="MyCtrl">
<button ng-click="getlocation()">Get Location</button>
</body>
</html>

app.js

var app = angular.module('myApp',[]);

app.controller('MyCtrl', ['$scope','$http',function ($scope,$http) {


    $scope.getlocation=function(){

      $scope.method = 'JSONP';
      $http({method: $scope.method, url: "http://maps.google.com/maps/api/geocode/json?address=Canada&sensor=true&region=USA"}).
        success(function(data, status) {

          $scope.status = status;
          $scope.data = data;
          alert(JSON.stringify(data));
        }).
        error(function(data, status) {
          $scope.data = data || "Request failed";
          $scope.status = status;
          alert($scope.data+$scope.status);
      });

    }
}]);

while run this code in browser it returns nothing. Throws error. Could you please help me to get out from this problem??

Status code : 404 Request Failed response... Could you please tell how to call this api "http://maps.google.com/maps/api/geocode/json?address=Canada&sensor=true&region=USA" via angularjs — sangeeth kumar, Mar 13 '15 at 07:22

score 1 · Answer 1 · edited May 23 '17 at 10:33

1

to work with jsonp in angular, you need... ?callback=JSON_CALLBACK passed to the get call..

e.g.

 $http({method: $scope.method, url: "http://maps.google.com/maps/api/geocode/json?address=Canada&sensor=true&region=USA&callback=JSON_CALLBACK"}).

read more about it here

edited May 23 '17 at 10:33

Community

1
1

answered Mar 13 '15 at 06:12

harishr

17,807
9
78
125

Thanks for your answer.I have tried ?callback=JSON_CALLBACK. But it doesnt work...try this $http({method: $scope.method, url: "http://maps.google.com/maps/api/geocode/json?address=Canada&sensor=true&region=USA&callback=JSON_CALLBACK"}) in plunker demo :http://plnkr.co/edit/spDiD4V6JCCXrtRNDV11?p=preview ...Once you done this You can understand my issue – sangeeth kumar Mar 13 '15 at 06:29

score 0 · Answer 2 · answered Mar 13 '15 at 06:18

0

The only problem your code has is that there isno such HTTP method as JSONP. In your case you need GET. So use this instead:

$scope.method = 'GET';

Demo: http://plnkr.co/edit/I6qAMbsvLwM3vgZFQa0S?p=preview

answered Mar 13 '15 at 06:18

dfsq

191,768
25
236
258

Thanks for your answer. I have tried $scope.method = 'GET'; this is also not working showing error as Request failed. this url http://plnkr.co/edit/I6qAMbsvLwM3vgZFQa0S?p=preview also shows same error "request failed" – sangeeth kumar Mar 13 '15 at 06:26
I can see that the demo I provided works perfectly, not sure what fails for you. – dfsq Mar 13 '15 at 06:47

score 0 · Answer 3 · answered Apr 17 '15 at 13:51

you have to change your request method from JSONP to GET.

 $scope.getlocation=function(){

      $scope.method = 'get';
      $http({method: $scope.method, url: "http://maps.google.com/maps/api/geocode/json?address=Canada&sensor=true&region=USA"}).
        success(function(data, status) {

          $scope.status = status;
          $scope.data = data;
          alert(JSON.stringify(data));
        }).
        error(function(data, status) {
          $scope.data = data || "Request failed";
          $scope.status = status;
          alert($scope.data+$scope.status);
      });

    }

I have tested it from my side and its returns

Object {results: Array[1], status: "OK"}

Hope you get what you are looking for.

$http.get and $http.JSONP failed to get the google api response

3 Answers3