How to Render Photos of Any City in the World in Your App

Using Google Places API

Image for post
Image for post

1-Place Autocomplete

There’s a couple of reasons why I chose to start the implementation of this functionality by utilizing Google’s Place Autocomplete. Mainly, I wanted my user to be able to input any city in the world, while at the same time making sure that it is indeed a valid city. By predicting and giving our user options of cities that match what they are typing, we are also taking care of our input validations. Also, the information returned by the Place Autocomplete is vital for the implementation of the next step.

https://maps.googleapis.com/maps/api/place/autocomplete/json?input=TEXT_INPUT_VALUE&types=(cities)&key=YOUR_API_KEY
Image for post
Image for post
Image for post
Image for post

2-Place Details

Now that we have a city’s place_id, we can make a request to get more details about our selected city. This request can return a response containing more comprehensive information about a specified place, such as complete address, geometry, name, phone number, hours of operation (not relevant to our case), etc. Our request is going to be another GET request to the following URL:

https://maps.googleapis.com/maps/api/place/details/json?place_id=PLACE_ID_OF_SELECTED_CITY&fields=photo&key=YOUR_API_KEY
Image for post
Image for post

3-Place Photos

The Place Photo service of the Places API is what gives us access to photos of a specified place. Besides our API key, a request to Place Photo requires a photo_reference parameter. This is the reason why we have to go through the other 2 services before we can have access to photos from our user’s city query. Our GET request will be to this HTTP URL:

https://maps.googleapis.com/maps/api/place/photo?&photoreference=PHOTO_REFERENCE&key=YOUR_API_KEY
Image for post
Image for post

Written by

Theatre artist turned Software Engineer 🤓

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store