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

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 ต.ค. 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'

  • @MbaliTwala-be2kb
    @MbaliTwala-be2kb 8 หลายเดือนก่อน +5

    Please Coder Coder, may you please make the updated version of this video😭

  • @devchaudhary78
    @devchaudhary78 3 ปีที่แล้ว +25

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

  • @Sacknase381
    @Sacknase381 8 หลายเดือนก่อน +6

    the "styling your map thing dosent exist for me"

  • @codeSTACKr
    @codeSTACKr 3 ปีที่แล้ว +64

    Really cool!! Great job :)

  • @ericnunez223
    @ericnunez223 3 ปีที่แล้ว +31

    Now I could play actual Mario Kart in my Honda

    • @sida_g567
      @sida_g567 3 ปีที่แล้ว +2

      Buy a ferrari

  • @NFTim
    @NFTim 8 หลายเดือนก่อน +3

    Very nice tutorial, unfortunately it doesn't work anymore in this way, would love to see an updated version of this

  • @projectsection9422
    @projectsection9422 3 ปีที่แล้ว +20

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

  • @IndrajitShinde
    @IndrajitShinde 3 ปีที่แล้ว +25

    Who is your video Editor !
    Awesome work!

    • @TheCoderCoder
      @TheCoderCoder  3 ปีที่แล้ว +20

      My husband!

    • @encapsulatio
      @encapsulatio 3 ปีที่แล้ว +2

      @@TheCoderCoder You meant to say husbando.

  • @BryanJenks
    @BryanJenks 3 ปีที่แล้ว +12

    LOL
    > Google maps
    > "use favorite search engine"
    > *uses* duckduckgo
    Google: 😢️
    🤣️i use 🦆️🦆️➡️ as well 🙃️

    • @giannnnni
      @giannnnni 3 ปีที่แล้ว +1

      cringe

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

  • @mohamedmada4159
    @mohamedmada4159 3 ปีที่แล้ว +23

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

  • @oscarthroedsson1410
    @oscarthroedsson1410 ปีที่แล้ว +2

    Update and redo the video :P Google does not look like this anymore... :P

  • @sarahbahgat8052
    @sarahbahgat8052 2 ปีที่แล้ว +1

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

  • @ruiguirrugo1869
    @ruiguirrugo1869 3 ปีที่แล้ว +6

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

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

  • @DataProfessor
    @DataProfessor 3 ปีที่แล้ว

    Wow, that was a super cool project. Love the video editing, it’s mind-blowing, which video editing software is your husband using?

  • @vanshajtyagi
    @vanshajtyagi 3 ปีที่แล้ว +1

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

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

    • @TheCoderCoder
      @TheCoderCoder  3 ปีที่แล้ว

      Thanks so much for your kind words!

  • @anqa318
    @anqa318 3 ปีที่แล้ว +1

    Me gustaria pensar si existoera algun juego de tercera persona para jugar dentro de google maps .... algo asi como el mario odyssey pero que pnes los mapas de google maps en street view :D..... alguien lo a pensado?

  • @typeofguyto
    @typeofguyto ปีที่แล้ว +1

    Hi! Not sure if you still check these comments..
    If I wanted to dynamically add markers. Like have a user place a marker and then save it to my list of objects, how could I do that??

  • @tropicaljupiter
    @tropicaljupiter 3 ปีที่แล้ว +1

    Awesome video. My girlfriend liked it and she doesn’t even code.

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

  • @marieseaman7855
    @marieseaman7855 3 ปีที่แล้ว +1

    Just so you all know, the Super Mario World is at Universal Studios Japan in Osaka, NOT Tokyo 😅

  • @vipul8749
    @vipul8749 3 ปีที่แล้ว +1

    Your video editing skills is awesome .
    Love from India 🇮🇳 .
    One question for you What u know about INDIA ? Have you ever visited 😊🙏

  • @Toobst8ker
    @Toobst8ker 3 ปีที่แล้ว +1

    I thought the themepark was in Osaka not Tokyo?

  • @himanshu6002
    @himanshu6002 3 ปีที่แล้ว +2

    I sometimes watch Sabrina and Friends and I literally can't differentiate you two 😥

  • @Codementor
    @Codementor 3 ปีที่แล้ว +5

    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
      @TheCoderCoder  3 ปีที่แล้ว +2

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

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

  • @SnappyScience
    @SnappyScience 2 ปีที่แล้ว

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

  • @wasifulalam1393
    @wasifulalam1393 3 ปีที่แล้ว +1

    I think I saw her some where in DMC5 with same look and characteristics

  • @yashipvt48
    @yashipvt48 ปีที่แล้ว +1

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

  • @russellcampbell76
    @russellcampbell76 4 หลายเดือนก่อน

    Not sure if this could help me with what I'm trying to do, but I'd rather see an iterative approach. 1) Just get a new locations mapped. Nothing fancy. 2) Refine with styles 3) Refine with this. 4) Refine with that. 5) Refine with some other thing. What I need is mapping multiple locations (and I'm trying to do it without using the Google Maps Platform), but what I always try to do is get the most important feature working, then refine it. Getting multiple locations on a map is the most important for me. Everything else is gravy. But, maybe you have other tutorials that would suit me better.

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

  • @_iam_seven_
    @_iam_seven_ 2 ปีที่แล้ว

    Can you please let me know how to create this same map project as an Android application. please let me know😭

  • @mittakolashivaram2823
    @mittakolashivaram2823 ปีที่แล้ว +1

    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.

  • @JosephMaharjan
    @JosephMaharjan 2 ปีที่แล้ว

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

  • @RicardoCerveraBlanco
    @RicardoCerveraBlanco 11 หลายเดือนก่อน

    Hi.
    Thanks for the video, I am trying to create an app using your video as guide but I end up making things unusable, all I am trying to do is to create an app that only display the speed limit and gps speedometer when you use google maps to drive.
    Any advise would be great.
    Thanks.

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

  • @shivanisharma6966
    @shivanisharma6966 3 ปีที่แล้ว

    it's getting error "Oops! Something went wrong.
    This page didn't load Google Maps correctly. See the JavaScript console for technical details.

  • @yashpathak-ow7df
    @yashpathak-ow7df ปีที่แล้ว

    now can I add this API to a PWA project and deploy it ? So that it can track movements ? I am building like a parking system, can you please answer ??

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

  • @skillme7777
    @skillme7777 3 หลายเดือนก่อน

    I didn't understand anything, she just does everything without giving us context. i think so, all the viewers are just fall into tutorial hell and just commenting good content.

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

  • @ehsanafzal1589
    @ehsanafzal1589 3 ปีที่แล้ว

    How i can activate my andriod app with voice command
    Foe example my has a feature to record my voice.. Now when i speak that voice the app should run
    How i can implement this... Can a video on this

  • @ВасилисКарапас
    @ВасилисКарапас 3 ปีที่แล้ว +2

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

  • @Sedious
    @Sedious 3 ปีที่แล้ว

    > Learn JavaScript.
    > Make Mario themed Google map.
    > ...
    > Get sued by Nintendo.

  • @marcoborghi9327
    @marcoborghi9327 ปีที่แล้ว

    Does anybody know how to overlay a grid on google maps , im developing an app in android and i need to develope a grid- based localization system ( the purpose of the app is to color each section of the map in a different color based on the sound level recorded in that section) .

  • @SantoshLLC
    @SantoshLLC 3 ปีที่แล้ว +1

    Hey this video is so cool! Can someone advise me other nerdy projects like this one please? ( I love it)

    • @lilliemucha6419
      @lilliemucha6419 3 ปีที่แล้ว

      It’s less accessible and harder to replicate than this video, but I love watching Sebastian Lague’s coding videos. He uses Unity and C++ mainly. Here’s a fun one: th-cam.com/video/bqtqltqcQhw/w-d-xo.html

  • @sriramkasu7511
    @sriramkasu7511 3 ปีที่แล้ว

    Could anyone help me extending this project like...adding new markers and navigating between those markers

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

  • @mirpeter
    @mirpeter ปีที่แล้ว

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

  • @vatsalsuthar954
    @vatsalsuthar954 ปีที่แล้ว

    can u guide me about how to show only particular places locations with it's inbuilt markers likewise schools or hotels inside the polygon area only using google api

  • @azrflourish9032
    @azrflourish9032 2 ปีที่แล้ว

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

  • @nileshghadge5016
    @nileshghadge5016 3 ปีที่แล้ว +1

    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 ปีที่แล้ว +2

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

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

  • @sebipoiana1768
    @sebipoiana1768 3 ปีที่แล้ว

    Hello, I am not able to get rid of the error ReferrerNotAllowed! Can anybody please help me? :'(

  • @kanishka_malviya
    @kanishka_malviya 10 หลายเดือนก่อน

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

  • @scottsmith5048
    @scottsmith5048 3 ปีที่แล้ว +4

    Great job! I do miss your "live" page layouts, like the Frontend Mentor series posted in several parts on TH-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!!

  • @mehakrandhawa4396
    @mehakrandhawa4396 4 หลายเดือนก่อน

    loved it !!!!...but..how can i get the markers that you used in your video??

  • @NeverPr
    @NeverPr 7 หลายเดือนก่อน

    This is nice but i want something free. I have been looking for so long now and i cant find anything :(

  • @theblueplanet3576
    @theblueplanet3576 ปีที่แล้ว

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

  • @needleskane1370
    @needleskane1370 ปีที่แล้ว

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

  • @rodolfom6746
    @rodolfom6746 6 หลายเดือนก่อน

    my Queston would be how can you get paid doing this Mario theme or just a regular map ?

  • @Lionheartx02
    @Lionheartx02 3 ปีที่แล้ว

    Maybe someone suggested this or you guys thought about it already. Why not present bloopers vids at the end of the year ?

  • @writwikray1239
    @writwikray1239 2 ปีที่แล้ว

    Hi there! You asked about the format...for me i think this new format is a lot more cleaner and has a straight, to-the-point approach...well suited for TH-cam....i think the live recording is much more better for twitch.

  • @AlexVerdugoOFICIAL
    @AlexVerdugoOFICIAL ปีที่แล้ว

    Hi! How mucho it cost? I pay, anual ? Saludos!!

  • @guytruitt9657
    @guytruitt9657 ปีที่แล้ว

    I tried to keep up with you, you’re too good! How can I add this to a Wordpress site?

  • @tulipsrivastava2163
    @tulipsrivastava2163 3 ปีที่แล้ว

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

  • @JustPassingByBaby
    @JustPassingByBaby 3 ปีที่แล้ว +1

    All good. But why the purple side light?

  • @jarckn8080
    @jarckn8080 3 ปีที่แล้ว

    2:07 "[...] not all browsers support WebGL [...]" Can someone name one? I can't think of one which is actively being used by end devices and does not support WebGL. Or am I missing something?

    • @TheCoderCoder
      @TheCoderCoder  3 ปีที่แล้ว

      you're actually correct, pretty much all modern browsers support WebGL now! I was working off of outdated information.

  • @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 :)

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

  • @PrinceKumar-mf3tl
    @PrinceKumar-mf3tl 3 ปีที่แล้ว

    𝙳𝚘 𝚢𝚘𝚞 𝚗𝚎𝚎𝚍 𝙱𝙲𝙰 𝙲𝚘𝚞𝚛𝚜𝚎 𝚒𝚗 𝚏𝚞𝚝𝚞𝚛𝚎.

  • @FaruqBatula
    @FaruqBatula 3 ปีที่แล้ว

    Can you show how to build a online chat system and login and sigh ups with fire base

  • @Ravi_Mayank
    @Ravi_Mayank ปีที่แล้ว

    Can I customized the shortest Direction between point?

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

  • @14onyx
    @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:)

  • @chadthunder95
    @chadthunder95 3 ปีที่แล้ว

    You sound like the windows XP tutorial lady LOL

  • @Lermxx05
    @Lermxx05 ปีที่แล้ว

    The same proyect but for android, please u.u

  • @zubairuddinkhan5075
    @zubairuddinkhan5075 3 ปีที่แล้ว

    Wowwwwwwwwwwwwwwwwwwwww ... i dont understand y u dont have above billion subs ? you teach like a sensei.

  • @kennygray89
    @kennygray89 2 ปีที่แล้ว

    This did not help me for an office locator map BUT I watched the WHOLE video and it was very cool.

  • @quickcodingtuts
    @quickcodingtuts 3 ปีที่แล้ว +5

    This is awesome! Love creative tutorials like this one

  • @LinuxJful
    @LinuxJful ปีที่แล้ว

    Hi there, how do you create a custom boundary around a Google map?

  • @filip-m
    @filip-m 3 ปีที่แล้ว

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

  • @diegoocasiano
    @diegoocasiano 8 หลายเดือนก่อน

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

  • @code-tionary
    @code-tionary 2 ปีที่แล้ว

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

  • @xBobaFetish
    @xBobaFetish 3 ปีที่แล้ว +3

    alright now i'm convinced to learn javascript :D

  • @TheMrcountry95
    @TheMrcountry95 9 หลายเดือนก่อน

    I know I'm late to the party here and there's probably nobody listening, but even with the code copied exactly as it is in the video I can not get a map to show up. anyone have a suggestion? perhaps something that has changed since this was posted.

    • @jugo13
      @jugo13 8 หลายเดือนก่อน

      Here you go, try this :
      html :
      Simple Google Maps App

      /* The CSS will go here */



      // The JavaScript will go here


      css:
      #map {
      height: 400px;
      width: 100%;
      }
      js :
      function initMap() {
      var mapOptions = {
      center: new google.maps.LatLng(40.7128, -74.0060), // New York coordinates
      zoom: 8
      };
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      }
      NOTES:
      - don't forget to correctly link your css and your js files to your html.
      - don't forget to replace 'YOUR_API_KEY' in the script tag url by your actual api key.
      - your script with the google maps URL should go FIRST, then the script with the initMap() function.

  • @bangtancentric975
    @bangtancentric975 หลายเดือนก่อน

    i want yo to do tjis so bad but i need to create a payment acc and i dont have a credit or debit card 😭

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

  • @rnilu86
    @rnilu86 3 ปีที่แล้ว

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

  • @jairoelegante7642
    @jairoelegante7642 2 ปีที่แล้ว

    Awesome !!
    Where can i found the markers svg's ?

  • @iivarimokelainen
    @iivarimokelainen 3 ปีที่แล้ว

    very scripted, and tense. is the author just reading a text from the screen? also the title is a lie - it's mostly customized google maps, and the js is secondary at best.

    • @TheCoderCoder
      @TheCoderCoder  3 ปีที่แล้ว

      Thanks for the feedback! I'm trying out a different format for the video and was using a teleprompter to read the script. Definitely still need to figure some stuff out for it. As for the JavaScript, I was originally going to use hardcoded json to style the Google map, but noticed the new Google Cloud Platform in beta so decided it would be better to use the new version. I think JavaScript is still pretty important to the map since I'm using the Maps JavaScript API, and it wouldn't load without it 🙂 Cheers!

  • @kacoding
    @kacoding 3 ปีที่แล้ว

    Cool i want to replicate it to TAGALOG hehehe!

  • @jackshaw3722
    @jackshaw3722 ปีที่แล้ว

    Is there a way when customising-styles I can change it to satellite?

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

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