Google Maps JavaScript API Episode 1 - Displaying a Map

In this video series, we will be learning about the Google Maps JavaScript API. We will learn everything about the Google Maps JavaScript API ranging from creating a custom Google map to adding symbols, shapes, and more! In this video, we will learn how to add Google maps to our webpage. We will also learn about the Map object and LatLng object.

Link for Script tag

Become a Better Developer

My Software

Download Code

⌛ Timestamps
0:00 - Introduction
0:24 - What is an API?
0:42 - What is the JavaScript Maps API?
0:55 - Google Cloud Console/Platform
1:58 - What is a Billing Account?
3:57 - What is a Google Cloud Project?
5:23 - Enabling the JavaScript Maps API
6:54 - What is an API Key?
7:29 - Creating an API Key
7:55 - API Key Security
9:46 - Setting up the Project in VS Code
13:34 - Loading Google Maps onto Our Webpage
20:57 - Adding Multiple Maps to Our Webpage
22:37 - Outro

[alovesxo]

Wow! I was actually trying to learn this the other day!

[juanmanueltaboadaalvarez]

amazing tutorial man!
will be liking and commenting on every single one

[UlyssesStudios]

Excellent tutorial. Thank you. But if I don't use "async" when loading the API (second <script> in code), it doesn't work at all

[tapstothebeat]

Hello! How do you store and access your API key in a .js file in the script tag?

[riyajhossen]

Sir, How can we add marker clustering??

[mohamadilham]

bro where is this source code? I'm unable to finde atleast please upload a github link. there is nothing about google map api in the link you gave.