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

Поділитися
Вставка
  • Опубліковано 28 вер 2024

КОМЕНТАРІ • 402

  • @NetNinja
    @NetNinja 3 роки тому +190

    This is awesome, nice one :D

    • @TheCoderCoder
      @TheCoderCoder  3 роки тому +9

      Thanks so much!!! 🙏

    • @umarjafar2424
      @umarjafar2424 3 роки тому +5

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

    • @justnumber5197
      @justnumber5197 3 роки тому +4

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

    • @rajawanislam3969
      @rajawanislam3969 3 роки тому +3

      Love to see you here boss

    • @joe4175
      @joe4175 3 роки тому +5

      The Net Ninja Is Here :D

  • @dieselforge4181
    @dieselforge4181 3 роки тому +63

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

  • @CodeWithRVR
    @CodeWithRVR 3 роки тому +1

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

  • @MarioDuarteMD19
    @MarioDuarteMD19 3 роки тому +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

  • @ericnunez223
    @ericnunez223 3 роки тому +31

    Now I could play actual Mario Kart in my Honda

  • @scottsmith5048
    @scottsmith5048 3 роки тому +4

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

    • @TheCoderCoder
      @TheCoderCoder  3 роки тому +2

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

  • @roadrunner6127
    @roadrunner6127 2 місяці тому +1

    These videos are some of my favorites! Thank you! Ran into a snag and can't seem to be able to find the "Feature Type" section in the Google Maps API (maybe new interface). Is there anyone that can lend me a hand plz?

  • @Nicolas-vj5zc
    @Nicolas-vj5zc 2 місяці тому

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

  • @sarahbahgat8052
    @sarahbahgat8052 2 роки тому +1

    I'm trying this for a college project and the map still didn't appear by 13:00

  • @vanshajtyagi
    @vanshajtyagi 3 роки тому +1

    this is soooo goood !!! Can you make some projects using AWS? (Suggestion for next video)

  • @jorgesk
    @jorgesk 3 роки тому

    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

  • @ahsantahseen6531
    @ahsantahseen6531 3 роки тому +1

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

  • @diegoocasiano
    @diegoocasiano 8 місяців тому

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

  • @rahuls7039
    @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.

  • @jettthecoder1185
    @jettthecoder1185 3 роки тому

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

  • @JosephMaharjan
    @JosephMaharjan 2 роки тому

    In 13:24 ,API Key is not blurred!!
    Great job & u r motivatinggggggg!!

  • @frenchismexican
    @frenchismexican Рік тому

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

  • @BenjaminEmm
    @BenjaminEmm Рік тому +2

    I've turned off all the map labels when creating my custom map, and correctly got my map showing in HTML, however all the labels I have turned off still appear... Anyone know how I can fix this?

  • @norbutamang8400
    @norbutamang8400 3 роки тому

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

  • @animatedzombie64
    @animatedzombie64 3 роки тому

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

  • @nadeemvisuals3314
    @nadeemvisuals3314 3 роки тому

    I am not a developer even I don't know c of coding but I watched your video randomly I like the way you are explaining and talking I like your voice maybe you can be the best voice over artist too :)

  • @TheNiqht
    @TheNiqht 3 роки тому

    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!

  • @my_j.a.r.v.i.s.
    @my_j.a.r.v.i.s. 3 роки тому

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

  • @NotoriousArnav
    @NotoriousArnav 3 роки тому

    Finally, I found Joma Tech like channel

  • @sony4481
    @sony4481 3 роки тому

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

  • @joshuajaydan
    @joshuajaydan 2 роки тому

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

  • @TheSpriteStory
    @TheSpriteStory 3 роки тому

    This was a fun one! Thanks for the upload!

  • @shichi6309
    @shichi6309 11 місяців тому

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

  • @pulok9909
    @pulok9909 3 роки тому

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

  • @scorpion32
    @scorpion32 3 роки тому

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

  • @jnicoulakos
    @jnicoulakos Рік тому

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

  • @Sacknase381
    @Sacknase381 8 місяців тому +6

    the "styling your map thing dosent exist for me"

  • @liorneuman2198
    @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

  • @dariodiaz4529
    @dariodiaz4529 7 місяців тому

    This is a great video!!! thanks a lot

  • @mdrakibul7903
    @mdrakibul7903 2 роки тому

    Great! work dear. Just got it in time.

  • @ska2oos
    @ska2oos 3 роки тому +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?

  • @hrishikeshsankaranarayanan9513
    @hrishikeshsankaranarayanan9513 3 роки тому

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

  • @kamilwaszewski
    @kamilwaszewski 3 роки тому

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

  • @mohammedjuzer9748
    @mohammedjuzer9748 3 роки тому +1

    SUPER cool:)

  • @theblueplanet3576
    @theblueplanet3576 Рік тому

    Great tutorial. Learned something awesome. But what is the use case or need for doing something like this?

  • @7708Abby
    @7708Abby 3 роки тому +1

    Awesome project... need to practice... tnx 😊

  • @shivanaath9591
    @shivanaath9591 3 роки тому

    wow this is reallly cool teach us a lot coder coder

  • @rogercolque
    @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

  • @ItsMiaMuffy3
    @ItsMiaMuffy3 Рік тому

    Hello! I've been looking and I really can't find any SVG's similar to yours, can you give me any hint on how to get them?
    Thank you and keep the awesome and super helpful work!

  • @ibuildthingys
    @ibuildthingys 3 роки тому +1

    I was wondering if there is a way to customize the arrow in Maps, I know there are preset options like a car or a bus, but I want to customize it even more, is this possible?

  • @mirpeter
    @mirpeter Рік тому

    Thank you, great video.
    Can i embed this map into my wordpress website if i make it from scratch?

  • @needleskane1370
    @needleskane1370 Рік тому

    Where are the marker icons? Either I am dumb and I dont find it or almost nobody finished the project

  • @yashipvt48
    @yashipvt48 Рік тому +1

    why does it open a billing section whenever I click on the APIs option

  • @SkyKosiner
    @SkyKosiner 3 роки тому

    Amazing video looking forward to more videos coming

  • @helionzerx817
    @helionzerx817 3 роки тому

    How long did it take you to become this good, I have 3 yrs on me to learn and i wanna become a web developer!

  • @Arjunarjunskiy
    @Arjunarjunskiy 3 роки тому

    This format is way better, because when you do live coding, you know, we repeat after you... and when you make a mistake and then correct it, we have to do the same. At times it feels frustrating.

    • @TheCoderCoder
      @TheCoderCoder  3 роки тому +1

      That makes a lot of sense, thanks for sharing!

  • @vivekkumar-pc1xy
    @vivekkumar-pc1xy Рік тому

    Amazing tutorial

  • @jayleebernarte9967
    @jayleebernarte9967 3 роки тому

    Your awesome at editing your videos.

  • @CompSciCentral
    @CompSciCentral 3 роки тому

    You literally have the coolest videos!
    le sigh... My tuts will never be this good 😅

  • @tulipsrivastava2163
    @tulipsrivastava2163 3 роки тому

    Where did you get those star, pipe, roshi's house, etc. SVGs from?

  • @kanishka_malviya
    @kanishka_malviya 10 місяців тому

    I did get the map but it has a watermark all over it saying "For Development purposes only"

  • @axel_logan
    @axel_logan Рік тому

    this was awesome

  • @anmaral-sharif1381
    @anmaral-sharif1381 3 роки тому

    Wonderful! Thanks

  • @wcandillon
    @wcandillon 3 роки тому

    haha amazing, congrats :)

  • @kberwager
    @kberwager Рік тому

    Great tutorial! I like your teaching style! Question 🙋‍♂️ Do you have a tutorial on adding a large svg overlay? It’s a site map for a home builder and I want to setup the main site map in position and then allow their sales managers to have dynamic control to change the occupancy status of each lot block. I’d build it via php, html,css and integrate with Wordpress and ACF Pro for custom fields. Just need a good tutorial on how I’d accomplish this challenge. I’d want the hover tooltip to pop up over each lot block. In the admin the agents would simply create a lot, update the occupancy status of the lot and the color of the lot would change automatically (red for sold etc.) then since the home listing for the community site map is relationship field they’d just select to associate a related home listing and that data would populate the tooltip. I’d love to make this! I suppose I’d have to hardcode each lot blocks coordinates, not sure how to automate the lot block locations? When the agent creates a lot, how would it map the lot block to the exact coordinates? I don’t want them dragging a marker to the lot block space that would look ugly and be not very user friendly! Any direction would be super helpful. I don’t want to hire a developer or use a plugin. It’s a challenge I want to tackle.

  • @shohanurrahman2496
    @shohanurrahman2496 3 роки тому

    cool and really nerdy. Love it as a nerd.

  • @code-tionary
    @code-tionary 2 роки тому

    this was awesome but I actually thought you were sponsored by Mario lol

  • @Ravi_Mayank
    @Ravi_Mayank Рік тому

    Can I customized the shortest Direction between point?

  • @caominhdev
    @caominhdev 2 роки тому

    This is awesome

  • @chojiakimichi2587
    @chojiakimichi2587 3 роки тому

    You are one of my favorite youtubers. I get tears of joy watching and learning from your videos, I am not lying as stupid as that sounds haha. Thank you!!!!!

  • @SupercarWannabe
    @SupercarWannabe 2 роки тому

    I sub this channel after 3 seconds

  • @gregspot9538
    @gregspot9538 3 роки тому

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

  • @SnappyScience
    @SnappyScience Рік тому

    For someone learning front end development, who was looking for a Google Maps API tutorial, and loves Nintendo... I've stumbled on nirvana.

  • @azrflourish9032
    @azrflourish9032 2 роки тому

    what about RichMarker?? does it gets used now?? because I couldn't find a resource which works well

  • @P.D.V.J
    @P.D.V.J 3 роки тому

    This is so creative, keep it up

  • @lesbar3349
    @lesbar3349 Рік тому

    Hi, can you help? I have made my own google maps in html format Now I want to add text to different areas of the map. I am having problems finding out how to do this in a HTML file.

  • @RemotHuman
    @RemotHuman Рік тому

    is the api key really secure? (if we were to send the javascript code to the user like if we hosted this project on github pages for example)

  • @nileshghadge5016
    @nileshghadge5016 3 роки тому

    Edited format seemed a bit quick paced so it was a little difficult to keep with the video while practicing with it, but very neatly edited video for sure 👍🏼

    • @TheCoderCoder
      @TheCoderCoder  3 роки тому +1

      Thanks for your thoughts! I may try to do both types 🙂

  • @filip-m
    @filip-m 3 роки тому

    I tried to do it but it didn't work for me.... It just rendered the default map look.

  • @sprog4168
    @sprog4168 3 роки тому

    What theme do you use for vsc?

  • @brayanmauricio6920
    @brayanmauricio6920 3 роки тому

    what theme do you use in visual studio code

  • @pewpew1005
    @pewpew1005 2 роки тому

    this is so cool

  • @lexiriam
    @lexiriam 8 місяців тому

    When creating a project, what's the "Location" option for? Why leave it at "No Organization?" What happens if have to give it a location. These are all the questions that run through my head when people say, "oh, just leave it at default." Can anyone please explain what that's for when creating a project? Will there be a 2024 version? I started to follow the video, but sadly, the whole Maps console looked nothing like hers nor did it have options that she had on her dashboard. #frustrated

  • @devlogerio
    @devlogerio 2 роки тому

    You are gold, I just found a mine

  • @Mrtravises
    @Mrtravises 3 роки тому

    Whats title of the background music intro? It match the ambient of your intro😍
    Oh, and this is really cool tutorial btw👍

  • @xBobaFetish
    @xBobaFetish 3 роки тому +3

    alright now i'm convinced to learn javascript :D

  • @johnborron1059
    @johnborron1059 3 роки тому

    I like your live coding style, but there was so much information in this one that I don't think you could have got it across without editing. A fair bit above my level right now but wow there were some cool things in here for me. Possibilities I had no idea existed. Reminded me that pursuing this interest is turning out to be one of the best decisions I've ever made.

    • @TheCoderCoder
      @TheCoderCoder  3 роки тому +1

      Thanks so much for the feedback!! I'm glad most people seem to like both styles. And yeah this video would have been like 2 hrs long, live coding style 😂

  • @TallgrassMeander
    @TallgrassMeander 3 роки тому

    Great video. The one dislike must be from Bowser

  • @rangabharath4253
    @rangabharath4253 3 роки тому

    Awesome 👍

  • @inadogsworld
    @inadogsworld 2 роки тому

    I need help creating a custom map for my business and I know a website that I want to mimic... Could you please teach me how to this virtually on zoom? Also, what do you charge to teach me?

  • @Maindev1994
    @Maindev1994 2 роки тому

    which vs code theme is that one?

  • @catsanddogs6350
    @catsanddogs6350 2 роки тому

    its looking tough

  • @kacoding
    @kacoding 3 роки тому

    Cool i want to replicate it to TAGALOG hehehe!

  • @miguelhuayllas1484
    @miguelhuayllas1484 Рік тому

    Really helpfull video :D

  • @mae4109
    @mae4109 3 роки тому

    awesome 🔥

  • @tinkuthokchom2964
    @tinkuthokchom2964 3 роки тому

    Can You Do A Tutorial Of How To Make A 2D Or 3D Games From Scratch Using Unity Engine. Will Be Much Appreciated.

  • @engrmamun59
    @engrmamun59 Рік тому

    Great tutorial madam. May Allah hedayet to you !

  • @kekblob
    @kekblob 3 роки тому

    What music is that in the intro:?

  • @Ibralassaf
    @Ibralassaf 3 роки тому

    Great and high quality clear video 🚀
    Really loved the new editing format
    If you want my opinion both are amazing this format and live coding format so do both please 😂😂❤️

  • @AlThePal78
    @AlThePal78 2 роки тому

    You could of left the image online and used colorpicker in chrome, then it would of been easier to get the rgb, it would of been copy and paste

  • @new_learner001
    @new_learner001 2 роки тому

    My map can't be displayed pls help.

  • @MdHasib-iw6gf
    @MdHasib-iw6gf 3 роки тому

    This is really good.
    But we want live coding sometimes😊

    • @TheCoderCoder
      @TheCoderCoder  3 роки тому +1

      The next vid will be live coding! 😁

  • @shakibtaherjoy3279
    @shakibtaherjoy3279 3 роки тому

    What to do if I don't have a google domain name?

  • @varenzaghaisandra6305
    @varenzaghaisandra6305 3 роки тому

    SOOO COOOLLLL!!!!!!!!!!!!!!!!!!!!!!!!👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻