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

Подписаться 496 тыс.

Просмотров 276 тыс.

50% 1

🔥 Learn how to build a responsive website from a Figma design with HTML, SCSS, JS ➡️ coder-coder.com/responsive/
😎 Join the Coder Coder Club and get sneak peeks of videos: courses.coder-coder.com/p/club
👕 Get my hoodie here: coder-coder.com/merch
____________________
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: codemntr.io/devprojects
💻 Get the source code for my custom Google Maps project: codemntr.io/coder
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: academy.zerotomastery.io/a/af...
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
🔽 FOLLOW CODER CODER
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#css #javascript #html

Наука

Опубликовано:

17 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 399

@NetNinja 3 года назад

This is awesome, nice one :D

@TheCoderCoder 3 года назад

Thanks so much!!! 🙏

@umarjafar2424 3 года назад

WOW!!! Watching your Mario map, I missed Shaun. But Here ninja come! Thanks, Shaun & Jessica.

@justnumber5197 3 года назад

Hi net ninja!!! i like your tutorials!!

@rajawanislam3969 3 года назад

Love to see you here boss

@joe4175 3 года назад

The Net Ninja Is Here :D

@mohamedmada4159 3 года назад

I liked how thorough are you with each detailed little thing, It actually helps aspiring developers to make such great projects

@projectsection9422 3 года назад

The entire video is also an ASMR. Your voice is so pleasant to hear :D nice job.

@Codementor 3 года назад

This is the best tutorial, Jessica! We LOVED working with you on this, and cannot wait to see how other people create their own custom Google map!!

@TheCoderCoder 3 года назад

Thanks again! This was a really fun project to work on 😁

@codeSTACKr 3 года назад

Really cool!! Great job :)

@TheCoderCoder 3 года назад

Thank you!!

@TheNiqht 2 года назад

Awesome Tutorial!!! Easy to follow with speedups applied at the most pertinent times! Was just doing my assignment on incorporating google maps into a website when I remembered you did a video about this!

@nachorg 2 года назад

Total breathtaking tutorial, not only for the content but for the fluid way you explain it. Congrats 👏

@gtasanandreasmods1785 3 года назад

I feel this format tends to give information concisely, and in a shorter amount of time. Although I haven't watched your previous videos, so can't really say. :) you dope btw

@scottsmith5048 3 года назад

Great job! I do miss your "live" page layouts, like the Frontend Mentor series posted in several parts on RU-vid. Watching you work through issues while coding HTML and CSS is very educational and inspiring.

@TheCoderCoder 3 года назад

Next video will be a live coding one! 😄 Thanks so much for watching!!

@CodeWithRVR 3 года назад

I am a little average coder right now, but I watch your all videos editing and explanation in this video, you nailed it

@user-ff2et9rx5l 3 года назад

This is so awesome, it gives me goosebumps. I can't wait to deconstruct the code. Thank you, for sharing! ^_^

@mittakolashivaram2823 Год назад

The teaching style is awesome and I liked background music, It is soothing and we cant be bored by fusion of your teaching style and background music.

@janamacklin9332 3 года назад

I just came across your videos! I really appreciate your story of how you became a programmer! As well as the good advice you give in your videos! You have an awesome energy in all your videos! Keep being awesome! And thank you for your videos!

@TheCoderCoder 3 года назад

Thanks so much for watching!!

@moragodofthunder Год назад

This video helped so much! The editing was perfect and showed each step perfectly.

@ruiguirrugo1869 3 года назад

This format is super good keep coding and know that your voice reaches countries like Mozambique

@devchaudhary78 3 года назад

I consider you as my sister, master, sensei, teacher. I have just one request can you upload more frequently please, BTW love from india❤️

@chilledcoder3610 3 года назад

Awwww

@Oscar_Conde 2 года назад

This looks so complicated and yet so much fun to watch!

@animatedzombie64 3 года назад

hurray, it's the first video im watching from this channel. +sub, love the content

@ayoubelouafy6174 3 года назад

Love this one, working with APIs makes coding easy . i hope u still loading more videos like this, aaand thank u so much👍👏👏

@rudymoralesjr Год назад

Thank you so much for this tutorial! It's been a great inspiration to a simple webapp I'm building to have a place locator in it using Google Maps API, and your video has been so helpful! Thanks again!

@rahuls7039 3 года назад

Holy Moly for the Animation part (in intro)... Kudos to your better half, that's a job well done. And about the topic, it's always good for learning new things. Your videos motivate me a lot in this field.

@lininchebaganiacao3868 3 года назад

So glad i found this channel it helps me alot great explanation btw :)

@dieselforge4181 3 года назад

Thats cool af. I saved this under my Playlist 'Nerd Shit'

@TheCoderCoder 3 года назад

Haha nice 😁

@giannnnni 3 года назад

cringe

@Nicolas-vj5zc День назад

ONE OF THE BEST VIDEOS I'VE EVER SEEN IN MY LIFE, THANKS!!!!

@scorpion32 3 года назад

I always wanted to do this, thank you. This is so cool

@norbutamang8400 3 года назад

I enjoyed all along the video!! This is super fun! Thanks!!

@TheSpriteStory 3 года назад

This was a fun one! Thanks for the upload!

@jettthecoder1185 2 года назад

Wow this is definitely one of ur top 3 most amazing vids

@pulok9909 3 года назад

Wow. Just when I badly need it. Thanks for this awesome tutorial.

@akshhatsrivastava1972 3 года назад

Loved this amazing project idea!

@hariprakashpalanisamy923 3 года назад

Loved your code and explanation!! Thanks for the creative ideas too

@my_j.a.r.v.i.s. 3 года назад

You are really so sweet ! Thanks for holding hand throughout the project.

@joeserhal 3 года назад

Love it! Great job and thanks for sharing! 🍄⭐️

@TonyLauts Год назад

Well, found this a couple of years later. Perfect! Mine worked on the first watch of your video - very well done. Like & Subscribed !

@frenchismexican Год назад

This is cool. I lke the edited format. THank you for sharing!

@sony4481 3 года назад

Excellent way of thinking ... more videos like this, please. Thank you!

@ska2oos 3 года назад

Great idea! I might have missed this while watching the video but can we automatically set those Mario icons for all points-of-interest throughout the world or do we have to individually set them up as you did in the video?

@liorneuman2198 3 года назад

I like both formats because I am able to learn different things from each one so it would be great to mix things up. Great tutorial, I really enjoy how you explain things. Thank you

@TheCoderCoder 3 года назад

Ok awesome! Thanks for the comment!

@joshuajaydan 2 года назад

Great tutorial. Thank you! Really helped me learn the Google Map API.

@rnilu86 3 года назад

Cool. Awesome. I used Google Maps API many times before but never knew this.

@ericnunez223 3 года назад

Now I could play actual Mario Kart in my Honda

@sida_g567 3 года назад

Buy a ferrari

@TomTomDevelopers 3 года назад

Really impressive! I'm a bit bias on your choice of platform 😉 , but you've inspired me to try it myself... Great job!

@james56k Год назад

Brilliant video. Beautifully explained. Thanks!

@shichi6309 9 месяцев назад

Thank you so much! This really help me a lot!

@CodingCleverly 3 года назад

This is SO CREATIVE!💯

@diegoocasiano 5 месяцев назад

Wow! It's excellent. I'm learning to use the Google Maps Javascript API, and this video helped me

@14onyx 3 года назад

not sure what i watched, i lack of js knowledge big time and never code once tho but you're so calm and the content is great. So i subbed:)

@garynagle3093 3 года назад

Cool project. Loved this format

@nextifydev 3 года назад

A fun way to learn maps. Amazing video.

@robertp3596 3 года назад

Your voice is perfect for instructional videos. Awesome video!

@realmajed_ 3 года назад

Now this looks fun!

@kebo2105 3 года назад

I love ittt! I genuinely love it❤️

@developerhabits 3 года назад

Wow, this is super cool! Great job!

@TheCoderCoder 3 года назад

Thanks a lot!

@xBobaFetish 3 года назад

alright now i'm convinced to learn javascript :D

@jnicoulakos 11 месяцев назад

Great job in the video! I think I will give it a try! Thank you!

@Merctoonz 3 года назад

Funny how the universe provides what is needed... This lesson just fell out of the sky! Thanks! Both formats are great. Switch them up is my recommendation👍😉

@TheCoderCoder 3 года назад

Thanks for watching!

@MarioDuarteMD19 3 года назад

No one can tell me that this isn't the best and most creative coding channel on this platform! Oh, and yes I'm Mario, thanks for making me a Google map XD

@TheCoderCoder 3 года назад

Thanks so much for your kind words!

@edziogiorsetti1832 3 года назад

Great! Really appreciate your channel!

@iamme24cl 3 года назад

Another awesome video! 👌

@notvoidz 3 года назад

such a great video hope to see more content like this :)

@TheCoderCoder 3 года назад

You got it! :D

@stefanpiatkov48 3 года назад

Just saw your video on my home page, and already subscribed. Really good video.

@ahsantahseen6531 3 года назад

Woah! I didn't knew playing with maps is that much easy! Will def try it

@TheCoderCoder 3 года назад

It's really fun!

@ahsantahseen6531 3 года назад

@@TheCoderCoder Imma create something good!

@martintomson8322 3 года назад

I liked the compact format more then your live sessions, but still want them from time to time to see that even experts do mistakes while coding ^^

@TheCoderCoder 3 года назад

Awesome! Yeah I think I will continue making both types in my videos, they each have good points 👍

@shasha6790 Год назад

Liked your expression when you are moving your head here and there 😄

@dubaifatimaali 2 года назад

This is so interesting. I might try.

@SkyKosiner 3 года назад

Amazing video looking forward to more videos coming

@shivanaath9591 3 года назад

wow this is reallly cool teach us a lot coder coder

@hrishikeshsankaranarayanan9513 3 года назад

You are helping and motivating me so much😄 love from India❤️

@rogercolque 3 года назад

Nice video. 😄 first video i saw of your channel was _How to make a background-image transparent in CSS_ now here we go with this. i like everything about maps, geolocation and automation

@TheCoderCoder 3 года назад

Thanks for watching!

@pascarro Год назад

Awesome tutorial, thanks a bunch!

@aakash-codes 3 года назад

Really mind-blowing 🤯

@kamilwaszewski 3 года назад

Cool :) Keep up the good work! Greetings from Poland :)

@dariodiaz4529 5 месяцев назад

This is a great video!!! thanks a lot

@aniakubow 3 года назад

woaaah such a cool idea!

@TheCoderCoder 3 года назад

hehe glad you liked it! :D

@IndrajitShinde 3 года назад

Who is your video Editor ! Awesome work!

@TheCoderCoder 3 года назад

My husband!

@encapsulatio 3 года назад

@@TheCoderCoder You meant to say husbando.

@urlroute1489 3 года назад

Thank you!!! Love your content!!! 😎

@TheCoderCoder 3 года назад

Thanks so much for watching!

@digigoliath 3 года назад

Super Awesome!!! TQVM!!

@trinitysenpai7403 3 года назад

♥ sometimes i wonder if there are limits to what you can create with code. Thanks for DevProjects!

@huytruong6158 3 года назад

Amazing, good job :D

@gregspot9538 3 года назад

Fue muy increíble este tipo de formato, sigue con esos excelentes tutoriales.

@TheCoderCoder 3 года назад

Gracias!

@mrm1307 2 года назад

Only One word. Amazing! Keep going 😊

@anmaral-sharif1381 3 года назад

Wonderful! Thanks

@mdrakibul7903 2 года назад

Great! work dear. Just got it in time.

@TheWhiteFalcon92 3 года назад

awesome video I really like the format of way you make videos, especially when you problem solve issues and justify the use of a specif line of code. a lot of guides online don't really show much of the problem and just write code without any reasoning behind it. Thanks for sharing such great guides and videos. By the way do you have any videos of making a crud website or CMS website?

@TheWhiteFalcon92 3 года назад

I still prefer the live coding format :)