menu
arrow_back

Build a Nearby Business Search Service with Google Maps Platform

—/100

Checkpoints

arrow_forward

Start App Engine

Enable Google Maps Platform APIs and get an API key

Deploy the updated app engine application

Build a Nearby Business Search Service with Google Maps Platform

1시간 크레딧 7개

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 Google 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 Google Cloud 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 Google Cloud account or project, do not use it for this lab.

Note: If you are using a Pixelbook please open an Incognito window to run this lab.

How to start your lab and sign in to the Google Cloud 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 Sign in page.

    Sign in

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

  3. In the Sign in page, 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 Google Cloud account, do not use it for this lab (avoids incurring charges).

  4. 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 Cloud 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: python37

handlers:
- url: /
  static_files: index.html
  upload: index.html

- url: /index\.html
  static_files: index.html
  upload: index.html

- url: /.*
  secure: always
  script: auto

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.

Click Check my progress to verify the objective. Start App Engine

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.

Click Check my progress to verify the objective. Enable Google Maps Platform APIs and get an API key

이 실습의 나머지 부분과 기타 사항에 대해 알아보려면 Qwiklabs에 가입하세요.

  • Google Cloud Console에 대한 임시 액세스 권한을 얻습니다.
  • 초급부터 고급 수준까지 200여 개의 실습이 준비되어 있습니다.
  • 자신의 학습 속도에 맞춰 학습할 수 있도록 적은 분량으로 나누어져 있습니다.
이 실습을 시작하려면 가입하세요