Google Places Photo Request returning undefined

Question

I have a horizontal scroll bar, that appears on the map, whenever particular venues are requested via Google Places and markers are placed.

My idea, is to have this horizontal scroll bar display a picture of each returned venue using Google places Photo request. However, the .getUrl() method that Google advises to use, is returning me an 'Uncaught TypeError: undefined is not a function'; although I do receive an array of Objects and each Object has an array of photos.

Here is a part of my code:

for (var i = 0, place; place = venueData[i]; i++) {
        if (place.photos) {
            var photo = place.photos[0].getUrl({ 'maxWidth': 100, 'maxHeight': 100 });
            $('.venues-display').append('<li><div class = venue-picture><img src='+photo+'></div></li>')
        }
        else {
          $('.venues-display').append('<li><div class = venue-picture><img src='+ place.icon + '></div></li>') 
        } 

The error that I get points to the line with getUrl().

venueData variable - is the array of Objects that is returned back from Google Places Text Search.

'.venues-display' - is the class name of my scroll bar.

I am a newbie..and getting desperate, because I can't understand what am I doing wrong.

Pleeease heeeelp

Answer 1

The method .getUrl() only works with the Google Places Library (in other words if you call .PlaceServices), where you do not need to use your API key

new google.maps.places.PlacesService(map)

Otherwise, you need to use this piece of code for getting the photos:

https://maps.googleapis.com/maps/api/place/photo?parameters

At least that's what I understood with reading through the Google docs and using different pieces of code for the same reason