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

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


javascript angularjs google-maps-api-3

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>
Expand snippet