How To Use Mapbox To Create A Google Maps Clone Quickly

Поделиться
HTML-код
  • Опубликовано: 27 дек 2024

Комментарии • 232

  • @abhilekhgautam5963
    @abhilekhgautam5963 4 года назад +115

    Others youtuber - A long 4/5 hour project.
    Kyle - A 12 min google map program.

    • @WebDevSimplified
      @WebDevSimplified  4 года назад +72

      I always try to make my videos as short and to the point as possible.

    • @ikorir
      @ikorir 4 года назад +2

      @@WebDevSimplified Like it 👍🏼

    • @miauw8762
      @miauw8762 4 года назад +3

      @@WebDevSimplified It's perfect, keep it up! Love your tutorials

    • @susmitdas
      @susmitdas 4 года назад +1

      @@WebDevSimplified THANK YOU SOO MUCH!

    • @christian-schubert
      @christian-schubert 4 года назад +1

      @@WebDevSimplified That's why I've pretty much given up on Brad Traversy's channel at this point. Too many faces teaching too many totally unrelated topics in one go for hours on end. Don't get me wrong, most of his guest hosts undoubtedly are experts in their respective fields, know exactly what they're doing and are excellent teachers. Kudos to them and especially to Brad - he ranks high on my list of people I definitely look up to (goes without saying that you're on this list as well ;) ). I really do wish Brad the best of health and hope he'll get better soon. Unfortunately, his channel is a bit all over the place and doesn't seem to know which direction it's headed any more lately.
      Your content's a blessing as it is, please keep it this way.

  • @DocMaggie
    @DocMaggie 2 года назад +28

    Just a general tip which I see being done in almost all programming tutorials: when teaching people that are new to programming, they have a hard time instantly understanding what is appended to what. So, at the timestamp 3:58, don't name the div id "map", as well as the variable "map" AND the parameter value "map". Then beginners just have to look what is appended to what, and sometimes even wrongfully think that something else is appended to something else. It's not as intuitive to beginners as it is to programmers with at least some experience. The same goes with naming everything simply as "name", etc. Just make mini differences and it will be much clearer as to what is what.
    P. S. I'm not a beginner, but this very think bothered me so much when I was a beginner and learning over RUclips.

    • @jasonsworld333
      @jasonsworld333 Год назад +2

      Yes I agree it all becomes rather abstract.

    • @taurusdark7656
      @taurusdark7656 Год назад

      @@jasonsworld333 At minute 11:46, a choice of departure and arrival is made.
      I can do that but in my city, that is, how do I restrict it?

  • @rinkujain1245
    @rinkujain1245 4 года назад +16

    Google: We have worked hard for years to make an app called Google Maps. It's not easy.
    Kyle: Hold my code

  • @stevensmith7021
    @stevensmith7021 4 года назад +5

    That was impressive young man. Love your delivery... so calm and smoothing:)

  • @beinyourguard
    @beinyourguard 4 года назад +66

    "And now, in only in 55 hours, we're going to be in Manchester" lol

  • @1sanak
    @1sanak 4 года назад +1

    DUDE, I can't WAIT for your javascript course.

  • @MAJALIJU
    @MAJALIJU Год назад

    This was a great video! Helped me a lot with a personal project

  • @soft384
    @soft384 4 года назад +4

    what a coincidence I was just trying to find a video like this thanks man

  • @practical-skills-school
    @practical-skills-school 3 года назад

    Thankx a lot. Left Leaflet because of wierd perforamnce in bootstrap modals. Mapbox does have issues in them too, but more affordable

  • @crazyvaleideas
    @crazyvaleideas 3 года назад +1

    You are just amazing man 😁 i have no words for you !!! Thanks for all the stufff ❤️

  • @deepbaaaaaag
    @deepbaaaaaag 4 месяца назад

    He explain anything in less time 👏

  • @__dev14
    @__dev14 4 года назад +1

    Wow, exactly when I started looking into Mapbox! That timing 👌

  • @rishabincloud
    @rishabincloud 4 года назад +1

    Was waiting for this since the repo was created 😉

  • @saivamshi7091
    @saivamshi7091 2 года назад

    thank you, this made a lot of things easier for me.

  • @abhishekpratap05
    @abhishekpratap05 4 года назад +17

    *Last few minutes* there is no way he can implement that directional feature in this video.
    *1 min later*
    😐😱😵 Shouldn't have doubted him.
    Great video, big time fan of yours. The projects you bring are so much better and real world that it amazes me everytime.❤️

    • @WebDevSimplified
      @WebDevSimplified  4 года назад +3

      Thank you so much!

    • @abhishekpratap05
      @abhishekpratap05 4 года назад +1

      I am somewhat in pitfall, where I see every day new technology and brain is diverting it from the current technology I am working on. It's hard to manage as I just started my career in web development.

    • @nclsDesign
      @nclsDesign 2 года назад

      I mean, the thing is that you can either implement it by yourself with fetch/ajax requests tot the Directions API or you use the plugins the people created and that just goes holy hecking fast!

    • @taurusdark7656
      @taurusdark7656 Год назад

      @@WebDevSimplified At minute 11:46, a choice of departure and arrival is made.
      I can do that but in my city, that is, how do I restrict it?

  • @idevbrandon
    @idevbrandon 4 года назад +1

    Thank you! i really needed this tutorial and i will stick to your teaching tutorial concept too i saw your tutorial hell video and the reason why you keep making it short and simple is to let us build up stuff ourselves. i i will try to create something based on your video!

  • @shivamshekhar19
    @shivamshekhar19 4 года назад +2

    Great work! Really Look forward to such short duration projects!

  • @tofiknuryanto4247
    @tofiknuryanto4247 4 года назад

    and now i will build create personal maps navigator.
    Thanks a lotttttttt

  • @guillermomarindavila5779
    @guillermomarindavila5779 4 года назад

    This Is great i need a tutorial for a Google maps website and you upload this video, awesome!

  • @richardkirigaya8254
    @richardkirigaya8254 4 года назад +2

    Awesome...really simple and straight to the point. Thanx Kyle

  • @kosemekars
    @kosemekars 4 года назад +27

    12:22 minutes to create a Google Maps clone? Is this... legal?

    • @zeidmagboub5891
      @zeidmagboub5891 4 года назад +4

      guess he should get arrested for doing so

    • @sameergaikwad222
      @sameergaikwad222 4 года назад +3

      This is Legal. Nothing Wrong at all. All you are doing is using MapBox API and implementing your own Map App.

    • @zeidmagboub5891
      @zeidmagboub5891 4 года назад +4

      @@sameergaikwad222 OMG thanks for the detailed explaination, guess we should call off the SWAT team raid, (this and last comment was a joke if u didn't notice btw)

    • @sameergaikwad222
      @sameergaikwad222 4 года назад +1

      @@zeidmagboub5891 :D My Bad Sorry :D

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

    Thanks Kyle you are a saviour

  • @blockbuster007
    @blockbuster007 Год назад +1

    Excellent and to the point video. Can we add Navigation and multiple stops in between with optimized routes here?

  • @nehavig7584
    @nehavig7584 3 года назад

    You are brilliant Sir. Thanks for the video.😊

  • @jonmjauu6435
    @jonmjauu6435 4 года назад

    Gonna be really helpful for other projects I got in mind! 🤓

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

    you are doing great work!!

  • @aryanjpg
    @aryanjpg 4 года назад

    I wanted to thank you for making these videos
    Thanks bro

  • @synckamas8158
    @synckamas8158 4 года назад

    Thanks to this tutorial, please can you make again some videos about mapbox? Thnx, you're awesome

    • @utkarshrawat2872
      @utkarshrawat2872 3 года назад

      I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
      Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
      Book a meeting with me here:
      Link: calendly.com/utkarsh-rawat
      Email: Utkarsh.rawat@jungleworks.com
      Looking forward to hearing from you!

  • @tdsimpson
    @tdsimpson 2 года назад

    Great tutorial. Thanks Kyle!

  • @sameergaikwad222
    @sameergaikwad222 4 года назад

    Thanks Man. You saved my day. Nice Tutorial. :)

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb 3 года назад

    Thanks So Much Kyle, Your videos are so well explained and inspire me everyday

  • @Michijaeckson
    @Michijaeckson Год назад

    You just saved my life!!

  • @Tarunkumar-om3hu
    @Tarunkumar-om3hu 4 года назад

    I will create it ,
    Thanks for sharing your knowledge

  • @sankaranarayanan7847
    @sankaranarayanan7847 4 года назад +1

    Hi . Pls make more css clones like the youtube one.. I loved it

  • @shreyashsinghsachan5498
    @shreyashsinghsachan5498 4 года назад

    That's really interesting , great work 🔥❤️

  • @mattplaygamez
    @mattplaygamez 4 года назад +1

    Hi Kyle, Can you please make a video over authentication without depencies in Nodejs
    The video is great

  • @davronjs
    @davronjs 4 года назад

    wow, amazing bro, I loved your videos..

  • @21athletes
    @21athletes 4 года назад

    you are the best teacher!!

  • @prashoonbhattacharjee8211
    @prashoonbhattacharjee8211 4 года назад

    Hi Kyle,
    This is a very informative video!!

  • @saddam_codes
    @saddam_codes 3 года назад

    Hey, thanks for the tutorial man. It was really helpful.

  • @salehhassan6057
    @salehhassan6057 4 года назад

    I really like your subjects

  • @УрошТомић-у4ф
    @УрошТомић-у4ф 3 года назад

    Great video! :D

  • @KrishThakrar-ck3rn
    @KrishThakrar-ck3rn 8 месяцев назад

    Is it possible to retreive the locations entered in the default input fields into state variables in React?

  • @code4chaosmobile
    @code4chaosmobile 4 года назад

    Another Great video, thanks again.

  • @jaffarsharieff8528
    @jaffarsharieff8528 3 года назад

    Amazing, Loved it.

  • @digigoliath
    @digigoliath 4 года назад

    Super Awesome!!! TQVM!

  • @WallyJ2K
    @WallyJ2K 3 года назад

    Great video! Thanks!

  • @CodewithAby
    @CodewithAby 3 года назад

    short but powerful.....thanks for always

  • @de_leben
    @de_leben 3 года назад

    Nice video, thanks!

  • @corsaronero5619
    @corsaronero5619 4 года назад

    super cool, thanks a lot Bro, keep it up :)

    • @utkarshrawat2872
      @utkarshrawat2872 3 года назад

      I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
      Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
      Book a meeting with me here:
      Link: calendly.com/utkarsh-rawat
      Email: Utkarsh.rawat@jungleworks.com
      Looking forward to hearing from you!

  • @abe10
    @abe10 4 года назад

    I used this in one of the challenges from Frontendmentor

  • @abdouett3676
    @abdouett3676 4 года назад

    Great tutorial, thank you!

    • @utkarshrawat2872
      @utkarshrawat2872 3 года назад

      I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
      Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
      Book a meeting with me here:
      Link: calendly.com/utkarsh-rawat
      Email: Utkarsh.rawat@jungleworks.com
      Looking forward to hearing from you!

  • @web-development4180
    @web-development4180 3 года назад

    Thanks man!

  • @iamthatsid
    @iamthatsid 4 года назад

    Kyle , when will be the course ready ? !

  • @sigfigronath
    @sigfigronath 3 года назад

    This is Amazing !

  • @pastel_skinn
    @pastel_skinn 6 месяцев назад

    I got a question KYLE sir would it be fine if we just copy this and add the UI/UX from our side and make an app to publish?

  • @minilikshumete2430
    @minilikshumete2430 3 года назад

    Wowww, u'r different, thanks alot

  • @human_justice
    @human_justice 3 года назад +1

    Hey Kyle, I am visiting a bootcamp in which I am learning about Web-Development. I am trying to integrate in my organizer application a map component. I am working with React js and I wonder if you have any recommendations on how to integrate your example in a React js Project? I would be thankful for any help =) I love your tutorials and hope to see more

  • @subn_
    @subn_ 2 года назад

    love the tutorial, when i click on map that coordinates were passed to the direction API and the route changes to the point I clicked, I don't want this to happen what should I do to turn of that. thanks in advanced..

  • @MohammadaAprilianto
    @MohammadaAprilianto 4 года назад

    how to add few marker and label?

  • @scottisitt
    @scottisitt 2 года назад

    Pretty cool! I don't suppose you could show us how to display geolocation data from a third party API on MapBox...?

  • @theroastingtoaster8542
    @theroastingtoaster8542 2 года назад

    excelent tutorial

  • @zainebmohammed4726
    @zainebmohammed4726 3 года назад

    very good, Thanks

  • @noel50005
    @noel50005 2 года назад

    Hello! I'd just like to know what app/program you used to run the Mapbox code, as I need to use it to run the codes for Mapbox. Thanks!

  • @danieltkach2330
    @danieltkach2330 3 года назад

    Could you do this one in React please? The demo on the documentation is not working for me.

  • @newbieeverything1643
    @newbieeverything1643 2 года назад

    Are you able to use this to calculate the estimated carbon emissions between point A and B?

  • @sabuein
    @sabuein 2 года назад

    Thank you.

  • @DheerajSharma-kt6df
    @DheerajSharma-kt6df 4 года назад

    Hello sir, really useful tutorial...what about live movement of user

  • @safarihooo0sh503
    @safarihooo0sh503 Год назад

    how do i add navigation, google navigation sdk on react native? so i can add a navigation route like in the google map, when we click on 'start'

  • @Techaddict
    @Techaddict 4 года назад +2

    I think your tutorials are amazing but I was thinking if you could make tutorials on PHP langauge too as it is also related to web development.

    • @utkarshrawat2872
      @utkarshrawat2872 3 года назад

      I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
      Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
      Book a meeting with me here:
      Link: calendly.com/utkarsh-rawat
      Email: Utkarsh.rawat@jungleworks.com
      Looking forward to hearing from you!

  • @jamespawson6045
    @jamespawson6045 3 года назад

    Hi Kyle, as an English person I love the fact you’re using English cities. I’m not nationalistic or anything, I actually live in Spain but it’s nice to see an American doing it. I assume you’re American… haha

  • @JeffersonEPessoa
    @JeffersonEPessoa 4 года назад

    Congratulations on the video. It was great. I have a question: if the user does not authorize the location, how about using the location of the IP address ??? Is there a free service with an API?

    • @utkarshrawat2872
      @utkarshrawat2872 3 года назад

      I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
      Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
      Book a meeting with me here:
      Link: calendly.com/utkarsh-rawat
      Email: Utkarsh.rawat@jungleworks.com
      Looking forward to hearing from you!

  • @ivanarakistain3885
    @ivanarakistain3885 2 года назад

    Great video. Is it possible to indicate to Mapbox that you want to avoid certain location and to calculate an alternative route?

  • @adityamaurya8092
    @adityamaurya8092 4 года назад +1

    Make a vedio on how to stream vedio on nodejs like RUclips .
    I have searched on Google but it's give code of that but I can not understand

  • @dipenchavda6988
    @dipenchavda6988 3 года назад

    Super COOL!!!!!!!!!!!!!!

  • @captainfoodman
    @captainfoodman 2 года назад

    hey, so does this mean, the map can also track the device's location too?? cause that's something I wanted in my web application.

  • @freddyescobar9029
    @freddyescobar9029 3 года назад

    Awesome men, could you do this using react-native

  • @swoorp
    @swoorp 4 года назад

    Wut?? Hey crazy person!! Love you 😘 loved the project

  • @Rohit-gw8tk
    @Rohit-gw8tk 4 года назад

    Awesome, thanks for this useful post.. Just one question is it possible to get district, city, country using current location and save it to mysql?
    Thanks

    • @utkarshrawat2872
      @utkarshrawat2872 3 года назад

      I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
      Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
      Book a meeting with me here:
      Link: calendly.com/utkarsh-rawat
      Email: Utkarsh.rawat@jungleworks.com
      Looking forward to hearing from you!

  • @AlThePal78
    @AlThePal78 4 года назад +1

    I was looking for that directions page and could not find it so I am lost

    • @utkarshrawat2872
      @utkarshrawat2872 3 года назад +1

      We are here to find you a smooth way, I guess that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
      Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
      Book a meeting with me here:
      Link: calendly.com/utkarsh-rawat
      Email: Utkarsh.rawat@jungleworks.com
      Looking forward to hearing from you!

  • @kaberanshutisamuel1856
    @kaberanshutisamuel1856 Месяц назад

    Me at 0:59
    Yeah, I am from the future!

  • @halilorki4103
    @halilorki4103 2 года назад

    Hi Kyle, How can I add ‘’ C or D clones ‘’ to search? İs it possible?Thanks a lot

  • @webdeveloperninja9220
    @webdeveloperninja9220 3 года назад

    Good stuff

  • @maskman4821
    @maskman4821 4 года назад

    I think mapbox and google map beats open street map in accuracy and functionalities, because once the usage grows, we will be billed automatically, so for practice and small application use free resources like osm+leafletjs is the best idea ...

    • @utkarshrawat2872
      @utkarshrawat2872 3 года назад

      You can give us a try, I guess that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
      Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
      Book a meeting with me here:
      Link: calendly.com/utkarsh-rawat
      Email: Utkarsh.rawat@jungleworks.com
      Looking forward to hearing from you!

  • @harsharamayanam7484
    @harsharamayanam7484 3 года назад

    Nice video. But how do we dynamically put "From-To" places in javascript?

  • @justaskdad
    @justaskdad 2 года назад

    Do you freelance for a Laravel project?

  • @HikikomoriDev
    @HikikomoriDev 4 года назад

    How would I go about having the server pre render all that and then just spitting out a grid of jpegs wherever the web client goes.

  • @randomvids7276
    @randomvids7276 3 года назад

    Can I use this for Augmented reality?

  • @RahulAhire
    @RahulAhire 4 года назад

    Kyle, I had one question that what you think between using gmap API Vs mapbox API. In my opinion no-one is as close and accurate to Google maps and generally pricing are even same. What's your opinion on it

    • @utkarshrawat2872
      @utkarshrawat2872 3 года назад

      You should try us once. I guess that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
      Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
      Book a meeting with me here:
      Link: calendly.com/utkarsh-rawat
      Email: Utkarsh.rawat@jungleworks.com
      Looking forward to hearing from you!

  • @peymanpishgah8561
    @peymanpishgah8561 3 года назад

    thanks so much.

    • @utkarshrawat2872
      @utkarshrawat2872 3 года назад

      I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
      Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
      Book a meeting with me here:
      Link: calendly.com/utkarsh-rawat
      Email: Utkarsh.rawat@jungleworks.com
      Looking forward to hearing from you!

  • @priyankanispro
    @priyankanispro 2 года назад +1

    2:46 :L Tapl Logo

  • @fediaayeb9639
    @fediaayeb9639 Месяц назад

    You are really wonderful

  • @ayushpal1427
    @ayushpal1427 2 года назад +1

    Can't we use MapBox without card details?

  • @Cloud-577
    @Cloud-577 4 года назад

    thank you that was helpful! I'm working on a side project and refuse to use Google api (broke ppl problem). also one of those days we will hear play the guitar lol

  • @ragunathanm6787
    @ragunathanm6787 4 года назад

    Awesome!!!

  • @josesosa2712
    @josesosa2712 3 года назад

    Well, I tried to look a location and it gives me other locations but the one that I require doesn't appear in the suggestions

  • @TheGarageboyz
    @TheGarageboyz 2 года назад

    Too cool!

  • @tarunbharadwaj9427
    @tarunbharadwaj9427 4 года назад +1

    Could you make a google classroom clone, that would be really helpful!!!

  • @VeiZeix
    @VeiZeix 4 года назад

    another simplified tutorial. thank you. if you don't mind, can you make a similar tutorial using leaflet or a basic to intermediate course on leaflet using opensource tileset? mapbox is really awesome but they get expensive after 25k users.

    • @utkarshrawat2872
      @utkarshrawat2872 3 года назад

      I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
      Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
      Book a meeting with me here:
      Link: calendly.com/utkarsh-rawat
      Email: Utkarsh.rawat@jungleworks.com
      Looking forward to hearing from you!

  • @ammnvx8799
    @ammnvx8799 3 года назад

    so for me the last 2 things is not working its not zooming in/out also Direction