Building a restaurant search app with the Google Maps Places API

Picture of Maco

Maco

Marketing, Master Concept

In this blog post, I’ll demonstrate how to build a restaurant search app using the new Google Maps Places API. The search app will allow the user to enter an address and get a list of nearby restaurants, together with pictures, descriptions and ratings.

What is an API?

An API, or Application Programming Interface, is a set of rules and protocols that define how apps communicate with each other over the internet. They define where an app should request data from, how to send that request, and the format in which data will be returned.

What is the Places API?

The Google Places API functions as a search engine for Google Maps data. It enables you to find places of interest on a map, similar to using the Google Maps app.

By integrating the Places API, you can embed map search functionality into your applications, allowing users to access Google Maps features without leaving your app. The Places API consists of five different APIs: Nearby Search, Text Search, Place Details, Place Photos and the Google Places Insights API. Today, we will focus only on the Nearby Search API.

How does the Places API work?

The Nearby Search API requires three key pieces of information:

  1. location: This is the central point from which the search will be conducted.
  2. radius: This specifies how far from the center location the search will cover.
  3. type: This restricts the results to places matching the specified type. Only one type can be specified. Supported types include “restaurant,” “plumber,” “gym,” and many others.

Endpoint: GET

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=49.2688067,-123.2125941
&radius=2500
&type=restaurant
&key=GOOGLE_API_KEY

For example, the code sample above will return all restaurants within a 2500 m radius of (49.2688067,-123.2125941).

Note: If you don’t have the GPS coordinates of your origin and destination, you’ll need to first convert your origin and destination addresses to latitude and longitude using the Google Maps Geocoding API.

Here’s what the response to the Nearby Search API call looks like:

{
    "html_attributions": [],
    "results": [
        {
            "business_status": "OPERATIONAL",
            "geometry": {
                "location": {
                    "lat": 49.2687435,
                    "lng": -123.1854349
                },
                "viewport": {
                    "northeast": {
                        "lat": 49.2700363302915,
                        "lng": -123.1840715697085
                    },
                    "southwest": {
                        "lat": 49.2673383697085,
                        "lng": -123.1867695302915
                    }
                }
            },
            "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/restaurant-71.png",
            "icon_background_color": "#FF9E67",
            "icon_mask_base_uri": "https://maps.gstatic.com/mapfiles/place_api/icons/v2/restaurant_pinlet",
            "name": "La Quercia",
            "opening_hours": {
                "open_now": false
            },
            "photos": [
                {
                    "height": 3072,
                    "html_attributions": [
                        "\u003ca href=\"https://maps.google.com/maps/contrib/112924311757606934120\"\u003eShaun Liu\u003c/a\u003e"
                    ],
                    "photo_reference": "AWU5eFgxYlZ5DNwbGVQbPx1JWIwk6fwZRr0akp6ItGVGUYB8ufNuLTXtJDYesN9H2YlGMPFluum3N-r7PmRRC-n6rWn4XORGLMJHDdf4IpB0N-BJn7F_6M_erpqOSBIUWHx3RY6PFhSFg60U2zuPbEnHQEx8Cs2CKYbuxbbTE8ImP7Ra0yNS",
                    "width": 4080
                }
            ],
            "place_id": "ChIJ34VbDlZyhlQRQ9iaa47Y7rI",
            "plus_code": {
                "compound_code": "7R97+FR Vancouver, BC, Canada",
                "global_code": "84XR7R97+FR"
            },
            "price_level": 3,
            "rating": 4.6,
            "reference": "ChIJ34VbDlZyhlQRQ9iaa47Y7rI",
            "scope": "GOOGLE",
            "types": [
                "restaurant",
                "food",
                "point_of_interest",
                "establishment"
            ],
            "user_ratings_total": 384,
            "vicinity": "3689 West 4th Avenue, Vancouver"
        }
    ],
    "status": "OK"
}

 

Take note of the following fields contained in the results array.

rating Contains the place’s rating, from 1.0 to 5.0, based on aggregated user reviews.

 

user_ratings_total is the total number of reviews, with or without text, for this place.

 

price_level is how expensive the restaurant is relative to others in the same general location. This value ranges from 0 (free) to 4 (very expensive).

 

name contains the human-readable name for the returned result, which for many businesses is simply the business name.

 

vicinity is the simplified address for the place, including the street name, street number, and locality, but not the province/state, postal code, or country.


This information can be used to display restaurant search results both as a list as well as a map, as demonstrated in the demo application.

 






How much does the Places API cost?

There are three pricing tiers for the new Google Places API – Basic ($32 CPM), Advanced ($35 CPM), and Preferred ($40 CPM).

Basic: This version of the Places API returns you a basic set of information about the area of interest which includes places.name, places.photos, and places.id.

Advanced: The advanced tier allows users to display additional information about a place including places.priceLevel, places.rating, places.regularOpeningHours.

Preferred: This highest tier includes extra, value-added information that your users might be willing to pay extra for. These include places.allowsDogs, places.curbsidePickup, and places.delivery.

You are only billed for the Places API SKU you consume e.g. if you select any fields from the Place Details (Preferred) SKU, then you are billed at $40 CPM, or $0.04 per request. In our example, the response returned included priceLevel and rating, so we will be billed at $35 CPM.


Conclusion

In this blog post, we explained how to use the GET version of the Google Maps Nearby Search API and use it to build a restaurant search application. Alternatively, can also use the newer version of the Google Nearby Search API, Nearby Search (New), which uses a POST endpoint, for more control over what data is returned.

Both methods work well for anyone trying to build a map search engine within their own applications.  If you have any questions about Places API, or any topics you would like us to share about in Google Maps API, feel free to leave us your comments via [email protected]

Comprehensive Technical Learning and Support By Professional Team

Leave Us Your Message
We are ready to talk!

Leave Us Your Message
We are ready to talk!

思想科技 Master Concept
微信公众号:Master_Concept

Can't Find What You Need? Join Our Latest Event!

Be the first to learn about
New Trends