Google Maps API Quickstart

●Introduction of Google Maps API Platorm
●Frequently used Maps APIs
●Frequently used Routes APIs
●Frequently used Places APIs
●Q & A


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 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. ● Location Parameters ● Map Parameters ● Feature Parameters Developer 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: /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:

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