title: CORS and Angular $http GET to Google Places API
body: <p>New to angular, trying to setup a very simple application using the Google Maps / Places API.</p>
  
  <p>I can successfully use the geolocation service with:</p>
  
  <pre><code>.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);
      });
     }
  }])
  </code></pre>
  
  <p><strong>Problem:</strong> 
  When I try a similar GET request to their Places API - I get CORS errors:</p>
  
  <p><code>XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=36.23…5.1458888&amp;type=bar&amp;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.</code></p>
  
  <p><strong>Question:</strong> Am I able to make these types of requests from Angular or do I need to setup the backend to make that call instead?</p>
  
  <p>I tried using JSONP as the method, which passed the CORS issue, but then I have the problem of not being able to access the data.  Not sure if it's invalid JSON... but it says <code>Unexpected identifier :</code>, and when I view the source it looks like perfectly fine data to me:</p>
  
  <pre><code>{
     "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" : []
           },
  </code></pre>