How To Use Mapbox To Create A Google Maps Clone Quickly

[@abhilekhgautam5963]

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

[@WebDevSimplified]

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

[@ikorir]

@@WebDevSimplified Like it 👍🏼

[@miauw8762]

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

[@susmitdas]

@@WebDevSimplified THANK YOU SOO MUCH!

[@christian-schubert]

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

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 KZbin.

[@jasonsworld333]

Yes I agree it all becomes rather abstract.

[@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]

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

[@stevensmith7021]

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

[@beinyourguard]

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

[@1sanak]

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

[@WebDevSimplified]

Only a few more days!

[@MAJALIJU]

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

[@soft384]

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

[@practical-skills-school]

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

[@crazyvaleideas]

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

[@deepbaaaaaag]

He explain anything in less time 👏

[@__dev14]

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

[@rishabincloud]

Was waiting for this since the repo was created 😉

[@saivamshi7091]

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

[@abhishekpratap05]

*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]

Thank you so much!

[@abhishekpratap05]

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]

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]

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

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]

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

[@tofiknuryanto4247]

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

[@guillermomarindavila5779]

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

[@richardkirigaya8254]

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

[@kosemekars]

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

[@zeidmagboub5891]

guess he should get arrested for doing so

[@sameergaikwad222]

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

[@zeidmagboub5891]

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

@@zeidmagboub5891 :D My Bad Sorry :D

[@throwawayaccount5464]

Thanks Kyle you are a saviour

[@blockbuster007]

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

[@rahulshekar907]

Did you find out how to do this?

[@nehavig7584]

You are brilliant Sir. Thanks for the video.😊

[@jonmjauu6435]

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

[@adilnesar291]

you are doing great work!!

[@aryanjpg]

I wanted to thank you for making these videos Thanks bro

[@synckamas8158]

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

[@utkarshrawat2872]

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: [e-mail] Looking forward to hearing from you!

[@tdsimpson]

Great tutorial. Thanks Kyle!

[@sameergaikwad222]

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

[@CreativeTutorialsWeb]

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

[@Michijaeckson]

You just saved my life!!

[@Tarunkumar-om3hu]

I will create it , Thanks for sharing your knowledge

[@sankaranarayanan7847]

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

[@shreyashsinghsachan5498]

That's really interesting , great work 🔥❤️

[@mattplaygamez]

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

[@davronjs]

wow, amazing bro, I loved your videos..

[@21athletes]

you are the best teacher!!

[@prashoonbhattacharjee8211]

Hi Kyle, This is a very informative video!!

[@saddam_codes]

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

[@salehhassan6057]

I really like your subjects

[@УрошТомић-у4ф]

Great video! :D

[@KrishThakrar-ck3rn]

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

[@code4chaosmobile]

Another Great video, thanks again.

[@jaffarsharieff8528]

Amazing, Loved it.

[@digigoliath]

Super Awesome!!! TQVM!

[@WallyJ2K]

Great video! Thanks!

[@CodewithAby]

short but powerful.....thanks for always

[@de_leben]

Nice video, thanks!

[@corsaronero5619]

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

[@utkarshrawat2872]

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: [e-mail] Looking forward to hearing from you!

[@abe10]

I used this in one of the challenges from Frontendmentor

[@abdouett3676]

Great tutorial, thank you!

[@utkarshrawat2872]

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: [e-mail] Looking forward to hearing from you!

[@web-development4180]

Thanks man!

[@iamthatsid]

Kyle , when will be the course ready ? !

[@WebDevSimplified]

In just a few days

[@sigfigronath]

This is Amazing !

[@pastel_skinn]

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]

Wowww, u'r different, thanks alot

[@human_justice]

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_]

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]

how to add few marker and label?

[@scottisitt]

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

[@theroastingtoaster8542]

excelent tutorial

[@zainebmohammed4726]

very good, Thanks

[@noel50005]

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]

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

[@newbieeverything1643]

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

[@sabuein]

Thank you.

[@DheerajSharma-kt6df]

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

[@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]

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]

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: [e-mail] Looking forward to hearing from you!

[@jamespawson6045]

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]

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]

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: [e-mail] Looking forward to hearing from you!

[@ivanarakistain3885]

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

[@taurusdark7656]

you could make it?

[@adityamaurya8092]

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

[@dipenchavda6988]

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

[@captainfoodman]

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]

Awesome men, could you do this using react-native

[@swoorp]

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

[@Rohit-gw8tk]

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]

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: [e-mail] Looking forward to hearing from you!

[@AlThePal78]

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

[@utkarshrawat2872]

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: [e-mail] Looking forward to hearing from you!

[@kaberanshutisamuel1856]

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

[@halilorki4103]

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

[@webdeveloperninja9220]

Good stuff

[@maskman4821]

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]

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: [e-mail] Looking forward to hearing from you!

[@harsharamayanam7484]

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

[@justaskdad]

Do you freelance for a Laravel project?

[@HikikomoriDev]

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]

Can I use this for Augmented reality?

[@RahulAhire]

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]

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: [e-mail] Looking forward to hearing from you!

[@peymanpishgah8561]

thanks so much.

[@utkarshrawat2872]

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: [e-mail] Looking forward to hearing from you!

[@priyankanispro]

2:46 :L Tapl Logo

[@fediaayeb9639]

You are really wonderful

[@ayushpal1427]

Can't we use MapBox without card details?

[@johnychinese]

Nope

[@Cloud-577]

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]

Awesome!!!

[@josesosa2712]

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]

Too cool!

[@tarunbharadwaj9427]

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

[@VeiZeix]

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]

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: [e-mail] Looking forward to hearing from you!

[@ammnvx8799]

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