How to get google place photo in angularjs using the photo reference

Question

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

Answer 1

Some observations :

• ng-repeat should be ng-repeat="photo in places[0].photos" instead of ng-repeat="photo in place.photos" as $scope.places is equal to response.data.results.
• Inject ngSanitize as a dependancy in your module and use ng-bind-html in your view to display the photo.html_attributions[0] as a link.

• Just substitute below params to display the reference of google photo.

  • photoreference
  • maxwidth - int value from 1 to 1600

  • key - YOUR_API_KEY

    Then, complete URL should 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>