0

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

Timoshka
  • 1
  • Your code looks okay to me. You may try inspecting the place.photo object, ex. alert(place.photo[0].getUrl) to be sure it returns an object. If not try alert(place.photo[0]). – ron tornambe Nov 12 '14 at 22:49
  • Use `if (place.photos.length)` instead of `if (place.photos)` – Dr.Molle Nov 13 '14 at 03:28
  • Thanks for replying, guys. I just discovered with printing out the photo objects in my console that they do not have the getUrl() method..maybe because I am requesting the venues using rails, and not google's JS methods for search. I've played around with Places library, including using google's JS methods for Place search, and this way a photo object does have a getUrl method and it works...Thanks again – Timoshka Nov 14 '14 at 04:31

1 Answers1

0

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

Timoshka
  • 1