24
Google Maps Course by Mireia Sangalo @MyPitit

Google Maps Course

Embed Size (px)

Citation preview

Page 1: Google Maps Course

Google Maps Course

by Mireia Sangalo

@MyPitit

Page 2: Google Maps Course

1. What is an API key and why do I need one?

2. How to create a Google API key

3. Add a Google Map

4. Style your google Map

5. Visualising data

Agenda

Page 3: Google Maps Course
Page 4: Google Maps Course

1. What is an API key and why do I need one?

2. How to create a Google API key

3. Add a Google Map

4. Style your google Map

5. Visualising data

Agenda

Page 5: Google Maps Course

1. API key

Page 6: Google Maps Course

• API key (Application programming interface key).

• Track and control how an API is being used.

• Prevent malicious users or abuse of the API.

• A unique identifier for each user.

• Secrete token for authentication.

• MAKE SURE YOU NEVER SHARE YOUR KEY

Page 7: Google Maps Course

1. What is an API key and why do I need one?

2. How to create a Google API key

3. Add a Google Map

4. Style your google Map

5. Visualising data

Agenda

Page 8: Google Maps Course

2. How to create a Google API key

Page 9: Google Maps Course

Hands on!

https://github.com/FAC-QMUL/APIs/tree/master/GoogleMaps-

workshop/1-2-ApiKey

Page 10: Google Maps Course

1. What is an API key and why do I need one?

2. How to create a Google API key

3. Add a Google Map

4. Style your google Map

5. Visualising data

Agenda

Page 11: Google Maps Course

3. Adding a Google Map

Page 12: Google Maps Course

You will learn…

• Create an HTML file to hold the map

• Load the Maps API with JavaScript

• Display a Map on your page.

Page 13: Google Maps Course

Hands on!

https://github.com/FAC-QMUL/APIs/tree/master/GoogleMaps-

workshop/3-AddingMaps

Page 14: Google Maps Course

1. What is an API key and why do I need one?

2. How to create a Google API key

3. Add a Google Map

4. Style your google Map

5. Visualising data

Agenda

Page 15: Google Maps Course

4. Styling Google Maps

Page 16: Google Maps Course

You will learn…

• Style the base maps colours.

• featureType

• elementType

• stylers

Page 17: Google Maps Course

Hands on!

https://github.com/FAC-QMUL/APIs/tree/master/GoogleMaps-

workshop/4-StyleMaps

Page 18: Google Maps Course

1. What is an API key and why do I need one?

2. How to create a Google API key

3. Add a Google Map

4. Style your google Map

5. Visualising data

Agenda

Page 19: Google Maps Course

5. Visualising data

Page 20: Google Maps Course

You will learn…• Import data into your Maps application.

• Display that data on a map using simple markers.

• Use symbols and heatmaps to improve the appearance and legibility of your map .

• Represent secondary information.

Page 21: Google Maps Course

Hands on!

https://github.com/FAC-QMUL/APIs/tree/master/GoogleMaps-

workshop/5-ImportData

Page 22: Google Maps Course

Project time!

Page 23: Google Maps Course

Time to put in practice all we have learned today.

https://github.com/FAC-QMUL/APIs/tree/master/GoogleMaps-

workshop/Project

Page 24: Google Maps Course

Questions?