Use the Google Maps API to build a custom map with markers

Опубликовано: 13 Сентябрь 2024
на канале: Coder Coder

284k

10k

Learn how to build a responsive website from a Figma design with HTML, SCSS, JS ️

Join the Coder Coder Club and get sneak peeks of videos:

Get my hoodie here:

____________________

In this video we'll be building a custom styled Google map with multiple custom markers, using the Google Maps JavaScript API.

Find coding projects and get feedback from DevProjects:
Get the source code for my custom Google Maps project:

0:00 - Intro
0:55 - Create a new Google Cloud project
1:46 - Create a custom map
2:18 - Create the Mario themed map style
6:28 - Get Google Maps API key
7:59 - Building the basic map in the website
13:57 - Customize the map lat/lng and zoom level
15:02 - Adding custom map markers
18:05 - Animating the map marker
18:35 - Adding a pop-up Info Window to marker
20:27 - Loading multiple markers with a for loop
23:18 - Checking out the final map!

____________________

Become a full-stack web dev with Zero to Mastery:

Get my VS Code theme:

FOLLOW CODER CODER
Twitter --
Instagram --