Neu zu eckig und versucht, eine sehr einfache Anwendung mit der Google Maps / Places-API einzurichten.

Ich kann den Geolocation-Service erfolgreich mit folgenden Komponenten verwenden:

.controller('MainCtrl', [
  '$scope',
  '$http',
  function($scope, $http){
     $scope.userLocation = [];
     $scope.currentLocation = function() {
       $http({
         method: 'GET',
         url: 'https://www.googleapis.com/geolocation/v1/geolocate?key=xxx'
    }).then(function successCallback(response) {
      $scope.userLocation.push(response);
    });
   }
}])

Problem Wenn ich eine ähnliche GET-Anfrage an die Places-API versuche, erhalte ich CORS-Fehler:

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=36.23…5.1458888&type=bar&key=xxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:3000' is therefore not allowed access.

Frage Kann ich diese Art von Anfragen von Angular aus stellen oder muss ich das Backend einrichten, um diesen Anruf zu tätigen?

Ich habe versucht, JSONP als Methode zu verwenden, wodurch das CORS-Problem behoben wurde, aber dann habe ich das Problem, dass ich nicht auf die Daten zugreifen kann. Ich bin mir nicht sicher, ob JSON ungültig ist ... aber es stehtUnexpected identifier :, und wenn ich die Quelle ansehe, sieht es für mich nach perfekten Daten aus:

{
   "html_attributions" : [],
   "results" : [
      {
         "geometry" : {
            "location" : {
               "lat" : 36.2388477,
               "lng" : -115.1540073
            },
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
         "id" : "578bfba1f17b0c5fbdafd5b71600b50d3e95c1ca",
         "name" : "Ruby Tuesday",
         "opening_hours" : {
            "open_now" : true,
            "weekday_text" : []
         },