menu
arrow_back

Build a Nearby Business Search Service with Google Maps Platform

Build a Nearby Business Search Service with Google Maps Platform

1 hour 7 Credits

GSP600

Google Cloud Self-Paced Labs

Overview

Learn to use Google Maps Platform's Maps and Places APIs to build a local business search, which geolocates the user and shows interesting places around them. The app integrates location, place details, place photos, and more.

What is Google Maps Platform?

Google Maps Platform brings the wealth of Google's location-based information to your app. Millions of developers use Google Maps Platform to help their users navigate the world around them, on the web and on mobile devices. The Google Maps Platform offers three core products:

  • Maps enables you to build customized, agile experiences that bring the real world to your users with static and dynamic maps, and 360° Street View imagery.

  • Places helps your users discover the world with rich location data for over 150 million places by using phone numbers, addresses, and real-time signals.

  • Routes gives your users the best way to get from A to Z with high-quality directions that factor in real-time traffic updates. Determine the route a vehicle travels to create more precise itineraries.

What you'll build

In this lab you're going to build a webpage that displays a Google map centered on the user's location, finds nearby places, and displays the places as clickable markers to show more details about each place. ae1caf211daa484d.png

What you'll learn

  • How to create a customizable map

  • How to geolocate the user

  • How to search for nearby places and display the results

  • How to fetch and display details about a place

  • How to deploy a web app using Google App Engine

What you'll need

  • Your favorite text or code editor
  • Basic knowledge of HTML, CSS, and JavaScript

The stepN folders contain the desired end state of each step of this codelab. They are there for reference. Do all your coding work in the directory called work.

This lab is focused on using the Google Maps JavaScript API and its Places Library. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.

Set up

Before you click the Start Lab button

Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long Cloud resources will be made available to you.

This Qwiklabs hands-on lab lets you do the lab activities yourself in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials that you use to sign in and access the Google Cloud Platform for the duration of the lab.

What you need

To complete this lab, you need:

  • Access to a standard internet browser (Chrome browser recommended).
  • Time to complete the lab.

Note: If you already have your own personal GCP account or project, do not use it for this lab.

How to start your lab and sign in to the Console

  1. Click the Start Lab button. If you need to pay for the lab, a pop-up opens for you to select your payment method. On the left is a panel populated with the temporary credentials that you must use for this lab.

    Open Google Console

  2. Copy the username, and then click Open Google Console. The lab spins up resources, and then opens another tab that shows the Choose an account page.

    Tip: Open the tabs in separate windows, side-by-side.

  3. On the Choose an account page, click Use Another Account.

    Choose an account

  4. The Sign in page opens. Paste the username that you copied from the Connection Details panel. Then copy and paste the password.

    Important: You must use the credentials from the Connection Details panel. Do not use your Qwiklabs credentials. If you have your own GCP account, do not use it for this lab (avoids incurring charges).

  5. Click through the subsequent pages:

    • Accept the terms and conditions.
    • Do not add recovery options or two-factor authentication (because this is a temporary account).
    • Do not sign up for free trials.

After a few moments, the GCP console opens in this tab.

Start App Engine

In the Google Cloud Platform Console, from the Navigation menu, select __App Engine. __This brings up the "Welcome to App Engine" screen. Click Create Application.

ddb57cee088543ca.png

Accept the default region (or select a new one) and click Create app.

e8329cc3051c3315.png

Accept the standard settings (us-central, Python, Standard) then Next to continue.

Once you get a notification that "Your App Engine app has successfully been created", open the Cloud Shell by clicking the Activate Cloud Shell button in the upper right corner of the console.

dd53bbfdfebf62a8.png

Then click Start Cloudshell.

In the Cloud Shell, download all the sample code needed for this lab by running this command:

git clone https://github.com/googlecodelabs/google-maps-nearby-search-js/

Move into the repo you just cloned.

cd google-maps-nearby-search-js

Copy the index.html file from the repo into the work/ folder, then move into your work/ folder. Throughout the rest of the lab, make your edits in the version in the work/ folder.

cp index.html work/
cd work

The work folder contains an app.yaml file. This is the file that configures your App Engine app's settings, such as specifying how URL paths correspond to request handlers and static files.

For this lab you do not need to modify this file. This is what the app.yaml looks like:

runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
  static_files: index.html
  upload: index.html
  secure: always
- url: /index\.html
  static_files: index.html
  upload: index.html
  secure: always

Now you are ready to deploy your app to App Engine and host it on Google Cloud Platform.

Use this command, which looks for the app.yaml file in the current directory and deploys the app according to the settings specified within:

gcloud app deploy

Type "y" when asked if you want to continue.

To view your new app, get the URL for your web app with this command:

gcloud app browse

This returns a URL that you can paste into your web browser. In the case of this lab, it follows the format https://your-project-id.appspot.com

Right now there's nothing to look at. Each time you want to view changes to your app based on edits in your code, run gcloud app deploy app.yaml to deploy the changes, and reload the page in your browser.

Enable Google Maps Platform APIs and get an API key

This section explains how to authenticate your app to the Maps JavaScript API and Places API using your own API key.

Follow these steps to enable the APIs used in this lab and get an API key:

  1. In the Google Cloud Platform Console, from the Navigation menu, select APIs & Services > Library.
  2. Click the Maps JavaScript API tile and click the Enable button.
  3. Repeat steps 1 and 2 to enable the Places API.
  4. From the Navigation menu, select APIs & Services > Credentials.
  5. Click Create Credentials and choose API key.
  6. You will see an "API key created" confirmation screen and your new key is listed on the Credentials page. You will need this key in the next step to add a map to your webpage.

Join Qwiklabs to read the rest of this lab...and more!

  • Get temporary access to the Google Cloud Console.
  • Over 200 labs from beginner to advanced levels.
  • Bite-sized so you can learn at your own pace.
Join to Start This Lab