I have been attempting to retrieve Google Places details using the angularjs-google-places plugin, but all I seem to be getting is an empty object. Despite following the setup instructions provided in the documentation, my efforts have not yielded any results. A similar issue is highlighted in this CodePen example. Below is a snippet of my code:
index.html
...
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="bower_components/angularjs-google-places/dist/angularjs-google-places.min.js"></script>
...
app.js
angular
.module('cityApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap',
'mgcrea.ngStrap',
'ngCordova',
'ngGPlaces'
])
...
restaurants.js
angular.module('cityApp')
.controller('RestaurantsCtrl', function ($scope, ngGPlacesAPI) {
$scope.details = ngGPlacesAPI.placeDetails({reference:"ChIJ4yo36JUn5IgRXgiRD7KMDe0"}).then(function (data) {
return data;
});
});
restaurants.html
<main>
<div class="container">
<p>{{details}}</p>
</div>
</main>