Here is the sample json:
{ "html_attributions" : [], "results" : [ { "geometry" : { "location" : { "lat" : -33.86755700000001, "lng" : 151.201527 }, "viewport" : { "northeast" : { "lat" : -33.86752310000001, "lng" : 151.2020721 }, "southwest" : { "lat" : -33.8675683, "lng" : 151.2013453 } } }, "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png", "id" : "ce4ffe228ab7ad49bb050defe68b3d28cc879c4a", "name" : "Sydney Showboats", "opening_hours" : { "open_now" : true, "weekday_text" : [] }, "photos" : [ { "height" : 750, "html_attributions" : [ "\u003ca href=\"https://maps.google.com/maps/contrib/107415973755376511005/photos\"\u003eSydney Showboats\u003c/a\u003e" ], "photo_reference" : "CoQBcwAAALJu5RtxzHQOMmymod7ZC7pBdmvu2B9CNM--jW4JHmYSSfUaAl8N9bKtJ-s6jnnx34vk4HMiTQMAmgTxqtxMhXpz-PHWsLhKMbueA_1-JVzcuRg8xZc4winHSETwpgQ0Z1E7SNR8FKJidbm2x8tCVdDrez1Kf4uYXBXiIuq9XWTWEhDtwkHhzUfrhlY173SOjrH3GhRqePzj-208MHwun5JZXNueHVGUzw", "width" : 1181 } ], "place_id" : "ChIJjRuIiTiuEmsRCHhYnrWiSok", "rating" : 4.3, "reference" : "CnRkAAAAQH-eVS3qC5X1iGf5VLdWVPrh4B8NsOaH-h3hEd3dzkTHzz9an9MYcUnN29-rzgVWRGfeS0_IwnoDXSLguQW8Uj6MS8BWr2o5pAQ55mNRO5Z7AiR7fIc2JzZT716Nx_m4uI58UxPdlc9hJ3uJMyNUihIQ2j7VKjkgPEwmQ8gVe5ErSRoU4toUaHai404Dc_B079CrniR_o5Y", "scope" : "GOOGLE", "types" : [ "travel_agency", "restaurant", "food", "point_of_interest", "establishment" ], "vicinity" : "King Street Wharf 5, Lime Street, Sydney" } ], "status" : "OK" } And I have this in my controller as an object:
angular.module('goafricaApp') .controller('MainCtrl', function ($rootScope, $scope, $http) { dataservice.getPlaces().then(function(response){ $scope.places = response.data.results; }); }); And here is my template:
<div class="row"> <md-content> <div class="col-md-4" ng-repeat="place in places" ng-if="$index < 3"> <md-card> <span ng-repeat="photo in place.photos"> <img ng-src="{{SHOULD BE PHOTO URL}}"> {{photo.photo_reference}} </span> <md-card-title> <md-card-title-text> <span class="md-headline text-center">{{ place.vicinity }}</span> </md-card-title-text> </md-card-title> </md-card> </div> </md-content> </div> I do get the photo reference all well, but how can I go ahead here and get the photo using the photo reference.
For first I feel like am doing it the wrong way. As the google documentation I read, there is no direct way to reference to the place photo.
For instance if you place the following code in browser, you will get the photo but that's only after a page refresh to produce another url which links to the photo.
https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRtAAAATLZNl354RwP_9UKbQ_5Psy40texXePv4oAlgP4qNEkdIrkyse7rPXYGd9D_Uj1rVsQdWT4oRz4QrYAJNpFX7rzqqMlZw2h2E2y5IKMUZ7ouD_SlcHxYq1yL4KbKUv3qtWgTK0A6QbGh87GB3sscrHRIQiG2RrmU_jF4tENr9wGS_YxoUSSDrYjWmrNfeEHSGSc3FyhNLlBU&key=YOUR_API_KEY 2 Answers
Answers 1
Some observations :
ng-repeatshould beng-repeat="photo in places[0].photos"instead ofng-repeat="photo in place.photos"as$scope.placesis equal toresponse.data.results.- Inject ngSanitize as a dependancy in your module and use
ng-bind-htmlin your view to display thephoto.html_attributions[0]as alink. Just substitute below params to display the reference of google photo.
photoreferencemaxwidth- int value from 1 to 1600key- YOUR_API_KEYThen, complete
URLshould be like this :https://maps.googleapis.com/maps/api/place/photo?maxwidth=MAX_WIDTH&photoreference=PHOTO_REFERENCE&key=YOUR_API_KEY
DEMO
var myApp = angular.module('myApp',['ngSanitize']); myApp.controller('MyCtrl',function($scope) { $scope.places = [ { "geometry" : { "location" : { "lat" : -33.86755700000001, "lng" : 151.201527 }, "viewport" : { "northeast" : { "lat" : -33.86752310000001, "lng" : 151.2020721 }, "southwest" : { "lat" : -33.8675683, "lng" : 151.2013453 } } }, "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png", "id" : "ce4ffe228ab7ad49bb050defe68b3d28cc879c4a", "name" : "Sydney Showboats", "opening_hours" : { "open_now" : true, "weekday_text" : [] }, "photos" : [ { "height" : 750, "html_attributions" : [ "\u003ca href=\"https://maps.google.com/maps/contrib/107415973755376511005/photos\"\u003eSydney Showboats\u003c/a\u003e" ], "photo_reference" : "CoQBcwAAALJu5RtxzHQOMmymod7ZC7pBdmvu2B9CNM--jW4JHmYSSfUaAl8N9bKtJ-s6jnnx34vk4HMiTQMAmgTxqtxMhXpz-PHWsLhKMbueA_1-JVzcuRg8xZc4winHSETwpgQ0Z1E7SNR8FKJidbm2x8tCVdDrez1Kf4uYXBXiIuq9XWTWEhDtwkHhzUfrhlY173SOjrH3GhRqePzj-208MHwun5JZXNueHVGUzw", "width" : 1181 } ], "place_id" : "ChIJjRuIiTiuEmsRCHhYnrWiSok", "rating" : 4.3, "reference" : "CnRkAAAAQH-eVS3qC5X1iGf5VLdWVPrh4B8NsOaH-h3hEd3dzkTHzz9an9MYcUnN29-rzgVWRGfeS0_IwnoDXSLguQW8Uj6MS8BWr2o5pAQ55mNRO5Z7AiR7fIc2JzZT716Nx_m4uI58UxPdlc9hJ3uJMyNUihIQ2j7VKjkgPEwmQ8gVe5ErSRoU4toUaHai404Dc_B079CrniR_o5Y", "scope" : "GOOGLE", "types" : [ "travel_agency", "restaurant", "food", "point_of_interest", "establishment" ], "vicinity" : "King Street Wharf 5, Lime Street, Sydney" } ]; });<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"> <div ng-repeat="photo in places[0].photos"> <img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth={{photo.width}}&photoreference={{photo.photo_reference}}"/> <span ng-bind-html="photo.html_attributions[0]"></span> <span>{{photo.photo_reference}}</span> </div> </div>Answers 2
The way to get the image is with something like this:
<div class="row"> <md-content> <div class="col-md-4" ng-repeat="place in places" ng-if="$index < 3"> <md-card> <span ng-repeat="photo in place.photos"> <img ng-src="https://maps.googleapis.com/maps/api/place/photo?photoreference={{photo.photo_reference}}&key=YOUR_API_KEY" class="md-card-image"> </span> <md-card-title> <md-card-title-text> <span class="md-headline text-center">{{ place.vicinity }}</span> </md-card-title-text> </md-card-title> </md-card> </div> </md-content> </div> Yet - DO NOT IMPLEMENT IT LIKE THIS! You see - you need to make sure to replace the YOUR_API_KEY with YOUR API KEY. This should be kept secret so you don't wand it in client facing code!
What you need to do is, at the backend, get all the images by calling the urls like https://maps.googleapis.com/maps/api/place/photo?photoreference=ENTER_PHOTO_REF_HERE&key=YOUR_API_KEY, save them locally on the server and at the front end reference the local copies. Benefits:
- No one will know your API key and will be able to abuse it.
- You will be able the cache the images and the next time the same image will be needed - you can get it from cache and not wast quota and time by calling the API again.
0 comments:
Post a Comment