Use the Google Maps API to build a custom map with markers
Vložit
- čas přidán 2. 08. 2024
- 🔥 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 - Věda a technologie
I liked how thorough are you with each detailed little thing, It actually helps aspiring developers to make such great projects
This is awesome, nice one :D
Thanks so much!!! 🙏
WOW!!! Watching your Mario map, I missed Shaun. But Here ninja come! Thanks, Shaun & Jessica.
Hi net ninja!!! i like your tutorials!!
Love to see you here boss
The Net Ninja Is Here :D
The entire video is also an ASMR. Your voice is so pleasant to hear :D nice job.
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!!
Thanks again! This was a really fun project to work on 😁
I am a little average coder right now,
but I watch your all videos
editing and explanation in this video,
you nailed it
Great job! I do miss your "live" page layouts, like the Frontend Mentor series posted in several parts on CZcams. Watching you work through issues while coding HTML and CSS is very educational and inspiring.
Next video will be a live coding one! 😄 Thanks so much for watching!!
Total breathtaking tutorial, not only for the content but for the fluid way you explain it. Congrats 👏
This format is super good keep coding and know that your voice reaches countries like Mozambique
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!
I consider you as my sister, master, sensei, teacher. I have just one request can you upload more frequently please, BTW love from india❤️
Awwww
This looks so complicated and yet so much fun to watch!
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
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.
This is so awesome, it gives me goosebumps. I can't wait to deconstruct the code. Thank you, for sharing! ^_^
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!
Thanks so much for watching!!
This video helped so much! The editing was perfect and showed each step perfectly.
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.
Well, found this a couple of years later. Perfect! Mine worked on the first watch of your video - very well done. Like & Subscribed !
Really cool!! Great job :)
Thank you!!
Love this one, working with APIs makes coding easy . i hope u still loading more videos like this, aaand thank u so much👍👏👏
You are really so sweet !
Thanks for holding hand throughout the project.
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!
Wow this is definitely one of ur top 3 most amazing vids
Liked your expression when you are moving your head here and there 😄
I always wanted to do this, thank you. This is so cool
Wow. Just when I badly need it. Thanks for this awesome tutorial.
Loved this amazing project idea!
This was a fun one! Thanks for the upload!
hurray, it's the first video im watching from this channel. +sub, love the content
So glad i found this channel it helps me alot great explanation btw :)
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 ^^
Awesome! Yeah I think I will continue making both types in my videos, they each have good points 👍
I enjoyed all along the video!! This is super fun! Thanks!!
Excellent way of thinking ... more videos like this, please. Thank you!
Cool. Awesome. I used Google Maps API many times before but never knew this.
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
Ok awesome! Thanks for the comment!
Now I could play actual Mario Kart in my Honda
Buy a ferrari
Loved your code and explanation!! Thanks for the creative ideas too
ONE OF THE BEST VIDEOS I'VE EVER SEEN IN MY LIFE, THANKS!!!!
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
Thanks so much for your kind words!
Love it! Great job and thanks for sharing! 🍄⭐️
alright now i'm convinced to learn javascript :D
Cute, I animated all those Mario shots in your intro!
This is cool. I lke the edited format. THank you for sharing!
Wow! It's excellent. I'm learning to use the Google Maps Javascript API, and this video helped me
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?
Just saw your video on my home page, and already subscribed. Really good video.
Great tutorial. Thank you! Really helped me learn the Google Map API.
Really impressive! I'm a bit bias on your choice of platform 😉 , but you've inspired me to try it myself... Great job!
Your voice is perfect for instructional videos. Awesome video!
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👍😉
Thanks for watching!
A fun way to learn maps. Amazing video.
Thats cool af. I saved this under my Playlist 'Nerd Shit'
Haha nice 😁
cringe
Brilliant video. Beautifully explained. Thanks!
Cool project. Loved this format
This is so interesting.
I might try.
Thank you so much! This really help me a lot!
Woah! I didn't knew playing with maps is that much easy! Will def try it
It's really fun!
@@TheCoderCoder Imma create something good!
Great job in the video! I think I will give it a try! Thank you!
Jajajajaj this is awesome! Imagine a 29 year old guy looking the video with a childish smile on his face ! Thanks for making my day :P
Super Awesome!!! TQVM!!
such a great video hope to see more content like this :)
You got it! :D
Amazing video looking forward to more videos coming
This is SO CREATIVE!💯
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:)
♥ sometimes i wonder if there are limits to what you can create with code. Thanks for DevProjects!
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
Thanks for watching!
wow this is reallly cool teach us a lot coder coder
Great! work dear. Just got it in time.
Wow, this is super cool! Great job!
Thanks a lot!
Great Job!
Fue muy increíble este tipo de formato, sigue con esos excelentes tutoriales.
Gracias!
Awesome tutorial, thanks a bunch!
This is a great video!!! thanks a lot
Cool :) Keep up the good work! Greetings from Poland :)
amongst the coding community coder coder had the best visual quality🙂
You are helping and motivating me so much😄 love from India❤️
Great! Really appreciate your channel!
Only One word. Amazing! Keep going 😊
Now this looks fun!
Really mind-blowing 🤯
great job!
Awesome video!
youre the best dude wow actually wow keep it up
This channel will be very popular in approx 2years. 🙂Nice👍🏼. I mean the type of audience will in increase.
Wowwwwwwwwwwwwwwwwwwwww ... i dont understand y u dont have above billion subs ? you teach like a sensei.
Wonderful! Thanks
You're the best! Thank's
SUPER cool:)
So cool !
Thanks for the fun little challenge! I really want to figure out how to add overlays onto the maps. I want to add areas onto my map like "Chinatown" or "Downtown".
Awesome!
Your awesome at editing your videos.
wow your channel is amazing! i am 51 years old and just learning how to program..
Amazing tutorial
Thank you!!! Love your content!!! 😎
Thanks so much for watching!
this is soooo goood !!! Can you make some projects using AWS? (Suggestion for next video)
Hi codercoder, just wanna say that your is style of teaching is very organic, it helps us understand that coding isn't about perfection like every other vids out there.
This video format feels good, u can switch up this style with your older one.
I presume this format helps u save time.
You should keep this good work up to help more people.
Your video and story helps me get motivated for coding.
Btw, since nobody is talking about this one ever since i saw your channel, u have a really goood playlist of background music on your videos, especially on the second part of this one.
Would u care giving me some playlist or genres of these BGMs u got? any resource would be appreciated :)
Much love from Philippines.
Keep up these good deeds ❤️
Most of the background music is from Streambeats by Harris Heller (on CZcams, Spotify, etc). Glad you like it! I'll try to put together a playlist of the songs I use
Another awesome video! 👌
So excited..