How can I make a simple get request with Angular to Google Places API?

Question

I've been working on this for awhile now and I'm quite frustrated. I just need to grab simple data about about a specific location.

Here is the code I'm using in Angular:

function getGoogle($http, $sce) {
    var url = $sce.trustAsResourceUrl('https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=mykey');
    var result = $http.jsonp(url, {jsonpCallbackParam: 'angular.callbacks._0'}).then(function(data){
        console.log(data);
    });

}

function config($stateProvider, $locationProvider){
    $stateProvider
        .state('sbucks', {
            url: '/',
            templateUrl: 'app/app.html',
            controller: 'AppCtrl as app',
            resolve: {
                cool: getGoogle
            }
        });

    $locationProvider.html5Mode(true);



}

function AppCtrl(cool){

    var vm = this;

    //console.log(cool);

}

angular.module('sbucks', [
    'ui.router',
    'sbucks.santamonica',
    'sbucks.newyork',
    'sbucks.london'
])

    .config(config)
    .controller('AppCtrl', AppCtrl)

;

These are the errors I keep getting:

Error 1: "Uncaught SyntaxError: Unexpected token : angular.js:14516"

Error 2: Possibly unhandled rejection: {"data":false,"status":404,"config":{"method":"JSONP","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"angular.callbacks._0","url":{},"headers":{"Accept":"application/json, text/plain, /"}},"statusText":"error"}

I know I'm doing something dumb, just totally stuck and frustrated.

The reason you have the second error is because your promise rejected and you haven't handled the reason. The rejection callback can be accessed via the second parameter in your .then callback. In this instance you got a 404 so either there is no API method associated with the URL path of the request, or the request refers to one or more resources that were not found. — cnorthfield
The $http method for GET requests is $http.get, not $http.jsonp. — georgeawg
Why on Earth are you setting jsonpCallbackParam: 'angular.callbacks._0'? Don't copy random code from StackOverflow. Never use code you don't understand. It definitely won't help you later and it could be, at best, very embarrassing if you are asked to explain code. — georgeawg
Because I'm struggling here and genuinely trying to figure this out. So I'm trying every option. Like I mentioned below, I started with GET but I keep getting "XMLHttpRequest cannot load maps.googleapis.com/maps/api/place/details/…. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8080'; is therefore not allowed access." I have no idea how to get through this on client side using Angular. — jtbitt

Pramod_Para Pramod_Para · Accepted Answer · 2017-03-20T22:55:12

Inject $http service into your module.

$http({
   method: 'GET',
   url: 'Your google places API URL'
}).then(function successCallback(response) {
   console.log(response.data);
}, function errorCallback(response) {

});

Your response parameter in successCallback will the have the following information.

data – {string|Object} – The response body transformed with the transform functions.

status – {number} – HTTP status code of the response.

headers – {function([headerName])} – Header getter function.

config – {Object} – The configuration object that was used to generate the request.

statusText – {string} – HTTP status text of the response.

How can I make a simple get request with Angular to Google Places API?

1 Answers