Build a Nearby Business Search Service with Google Maps Platform
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.
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
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
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
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.
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.
On the Choose an account page, click Use Another Account.
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).
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.
Accept the default region (or select a new one) and click Create app.
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.
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.
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
cp index.html work/ cd work
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
Follow these steps to enable the APIs used in this lab and get an API key:
- In the Google Cloud Platform Console, from the Navigation menu, select APIs & Services > Library.
- Repeat steps 1 and 2 to enable the Places API.
- From the Navigation menu, select APIs & Services > Credentials.
- Click Create Credentials and choose API key.
- 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.