展开查看详情
1 .Google Maps
API Quickstart
刘晓宇
12/8/2019
2 .Self-introduction
刘晓宇
6年云服务从业经验
Google Cloud Certified - Professional Cloud Architect
Google Cloud Certified - Professional Data Engineer
3 .Content
● Introduction of Google Maps API Platform
● Frequently used Maps APIs
● Frequently used Routes APIs
● Frequently used Places APIs
● Q&A
4 .Introduction
of Google
01
Maps Platform
5 .List of points
● What’s Maps API platform?
● How to enable all the APIs in the console?
● How to set the API keys restriction?
6 .Google Maps platform
99% coverage of the world
25 million updates daily
1 billion MAU
7 .3 core products
Maps Routes
Places
Directions
Maps Place Details
Distance Matrix
Street View Current Place
Roads
Find Place
Autocomplete
Geocoding
Geolocation
Time Zone
8 .HandsOn:
Start to use Google Maps Platform
Demo 1: enable all APIs in the console
Demo 2: set the restriction for your keys
9 .Demo 1: enable all APIs in the console
1. Go to the GMP official site https://cloud.google.com/maps-platform/
2. Click the blue “Get started” button
3. Tick Maps， Routes，Places, then click continue
4. Select a project, click next
5. After setting the billing, it will pop a wizard asking about some
questions which you can skip.
6. After the above step, it will tell you “This will enable 15 Google Maps
Platform API(s) and create an API key for your implementation”
7. Wait a second while the platform is enabling the APIs for you till you
see“You're all set! You're ready to start developing!” Click Done
Congratulations! Start your Google Maps API now!
16 .Demo 2: set the restrictions for your keys
1. After login the console, from the navigation menu choose API &
Services, click credentials, you will see the created keys.
2. Select the API key and click to edit the key
3. In the Application restriction section, you can control which websites,
IP addresses, or applications can use your API key.
4. In the API key restriction section，tick Restrict key, then you can
choose which APIs this key can use from select APIs
5. You can also regenerate or delete your key if needed.
20 .Frequently
used Maps
02
APIs
21 .List of points
● Maps Static
● Maps JavaScript
● Street view
● Demo: Street View Side-By-Side
22 .Maps Static
Add simple, embeddable map images to your website with minimal
code.
23 .Maps Static
The Maps Static API returns an image (either GIF, PNG or JPEG) in
response to an HTTP request via a URL.
https://maps.googleapis.com/maps/api/staticmap?parameters
● Location Parameters
● Map Parameters
● Feature Parameters
Developer Guide：
https://developers.google.com/maps/documentation/maps-static/dev-guide
24 .Maps JavaScript
Add an interactive map to your website. Customize it with your
own content and imagery.
25 .Maps JavaScript
Even in a simple example, there are a few things to note:
1. We declare the application as HTML5 using the <!DOCTYPE
html> declaration.
2. We create a div element named "map" to hold the map.
3. We define a JavaScript function that creates a map in the div.
4. We load the Maps JavaScript API using a script tag.
Developer Guide：
https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation
/javascript/tutorial
26 .Maps JavaScript
Libraries
Libraries are modules of code that provide additional functionality
to the main Maps JavaScript API but are not loaded unless you
specifically request them.
● drawing
● geometry
● places
● visualization
27 .Street View
Street View provides panoramic 360 degree views from designated
roads throughout its coverage area.
28 .Street View
● Dynamic : Allow user to interact with Street View
○ An instantiation of a panorama object in a Maps JavaScript
API, Maps SDK for Android, Maps SDK for iOS application.
● Static: No interaction
○ A request to the Street View API to embed a static
(non-interactive) Street View panorama.
Developer Guide：
https://developers.google.com/maps/documentation/streetview/intro
29 .Maps Optimization
● The use of a single map per page is a good way to optimize
maps display
● Identify if it is better to use a Dynamic or Static Map/Street View
○ What is the value to the customer and the end user
● Display a map at the right time
热门城市
