How to do a google place api search in angularjs controller

Question

I am trying to get places using google place api in my controller:

$http.get("https://maps.googleapis.com/maps/api/place/radarsearch/json?location=51.503186,-0.126446&radius=5000&type=museum&key=MY_KEY")
    .then(function(response) {
        $scope.results = response.data;
        console.log($scope.results);
    });

Unfortunately this doesn't work. After my console.log, I get the following error.

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/radarsearch/json?location=51.503…126446&radius=5000&type=museum&key=MY_KEY. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9004' is therefore not allowed access.

BTW this is not unique to localhost as I have tried the same in a live server. What is the google angularjs way to achieve this?

Have you simply add the google map file in your index.html with all the javascript files ? — Gerald Chablowski, Aug 20 '16 at 06:41
and why they are no number at the end of the google link &key=MY_KEY. You don't want to publish it here ? — Gerald Chablowski, Aug 20 '16 at 07:12
That's my private key number. In my application my key exist. Just didn't want to make it public, — LearnToday, Aug 20 '16 at 07:21
And when you just copy past the link in a browser. What you have ? — Gerald Chablowski, Aug 20 '16 at 07:26
Perhaps that : http://stackoverflow.com/questions/16661032/http-get-is-not-allowed-by-access-control-allow-origin-but-ajax-is — Gerald Chablowski, Aug 20 '16 at 07:52

score 1 · Accepted Answer · answered Aug 29 '16 at 17:08

The Google Places API Web Service is not intended to be used via ajax ($http service), but you could utilize Places Library instead, here is Angular example:

angular.module('mapApp', [])

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

        $scope.map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 51.503186, lng: -0.126446 },
            zoom: 15
        });

        $scope.infoWindow = new google.maps.InfoWindow();
        $scope.service = new google.maps.places.PlacesService($scope.map);

        // The idle event is a debounced event, so we can query & listen without
        // throwing too many requests at the server.
        $scope.map.addListener('idle', function () {
            var request = {
                location: {lat: 51.503186, lng: -0.126446},
                radius: 5000,
                type: ['museum']
            };
            $scope.service.radarSearch(request, $scope.processResults);
        });

        $scope.processResults = function (results, status) {
            if (status !== google.maps.places.PlacesServiceStatus.OK) {
                console.error(status);
                return;
            }
            for (var i = 0, result; result = results[i]; i++) {
                $scope.addMarker(result);
            }
        };

        $scope.addMarker = function(place) {
            var marker = new google.maps.Marker({
                map: $scope.map,
                position: place.geometry.location,
                icon: {
                    url: 'http://maps.gstatic.com/mapfiles/circle.png',
                    //anchor: new google.maps.Point(16, 16),
                    scaledSize: new google.maps.Size(20, 32)
                }
            });

            google.maps.event.addListener(marker, 'click', function () {
                $scope.service.getDetails(place, function (result, status) {
                    if (status !== google.maps.places.PlacesServiceStatus.OK) {
                        console.error(status);
                        return;
                    }
                    $scope.infoWindow.setContent(result.name);
                    $scope.infoWindow.open($scope.map, marker);
                });
            });
        }


    }]);

#map {
        height: 420px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>

<div ng-app="mapApp"  ng-controller="mapCtrl" >
  <div id="map"></div>
</div>

How to do a google place api search in angularjs controller

1 Answers1