How To Use Mapbox To Create A Google Maps Clone Quickly

did you know it's possible to build a google maps clone in just a few minutes let me show you how [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream projects sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now in this video we're going to be building out this google maps clone you can see on the right hand side of my screen you can see that we can enter a destination such as london and let's come in here and we're going to say manchester as our destination and you can see it gives us directions between these we can do driving directions we could do walking directions we could do cycling directions we could even you know zoom into one of the actual turns on the directions we can essentially build out a complete google maps clone and this project is actually straight from my javascript simplified course which is coming out very soon so you can use the link down in the description javascriptsimplified.com enter your email if you want to be notified when it releases or if you're from the future you can go check out that link and get the course right now because it should be available so to get started with this google maps clone we're going to be using something called map box and you can come in here to mapbox you just need to create an account with mapbox and once you create an account you're going to be saying where do you want to use mapbox whether it's the web ios android unity in our case we're going to be using this on the web we can just click on this web link here and we can say whether we want to use the mapbox cdn or if we want to use a modular bundler for our case we're just going to use the cdn because it's going to be easier and quicker to get started with and it says we need to include these scripts so to get started let's create an index.html file just get the boilerplate in there with exclamation point and hitting tab and then we can copy these script files over to here so now we have access to the mapbox script files and the css files inside of our javascript let's just change this to google apps clone there we go once we've done that we can just click next and it says now here we're going to add the map to our site let's just copy this paste this into our body as it says we're going to be modifying this code pretty heavily in just a little bit but for now that's all we need and then we click next and it essentially says you're done so if we just open this up with live server you should just wait a couple seconds and it'll appear over on the right hand side and you can see that we have mapbox being open and right now it just zooms into essentially coordinate zero zero and you can see we have a map we can navigate around the map we can look at whatever we want essentially we have a movable map which is great but i want to make this map full screen because right now it just takes up a small portion of the screen so to do that i'm just going to put some styles in here for our map and this div already has an id map so we can just say map we want the height to be oops 100 view height and the width to be 100 view width and let's just get rid of these hard-coded styles save that and now we have a full screen map and let's just make the body have no margin oops margin zero and there we go completely full screen map just like we want just like we have over here so now what i want to do instead of writing all of my code inside of here instead of our body i want to create a new script.js file let's just import that script.js file up here we'll just come in here and say script.js and we're going to defer this just so it loads after our body we're going to take all the code inside of here and just copy it over and then we can get rid of this script tag and if we save both these files we should get the exact same result okay that's good to know our results are exactly the same so now let's take a look at this code really quickly to see what's going on you can see we have this mapbox gl object this is being brought in from these mapbox scripts that we copied over let me just expand this so it's easier to see and then we have a creation of a new mapbox gl map we're passing at the id of our element our div element here where we want the map to be appended to this map here and we're passing a style which is essentially the type of map we want which in our case is this street view map so if we zoom in you can see that we can see all the different streets for all the different cities which is perfect you'll also notice up here we're setting our access token equal to this string and this comes from your actual account if we go and view our account if i can find that here we go and if we scroll all the way down to the bottom once this loads you'll see your access token here you can create new ones or just use this default one i'm going to be resetting my access token at the end of this video so you're going to need to use your own access token but it's super easy to create a mapbox account and get an access token so now in order to make this more like google maps the first thing i want to do is actually zoom in on my current location because right now we're kind of zooming into the bottom here of africa and pretty much in the middle of the ocean right now really not a super useful location to be what i want to do is get my current location so in order to do that we're going to be using the navigator.geolocation.getcurrentposition api essentially this is the api that allows you to get your location and whenever you see a pop-up that says this browser wants to view your location this is exactly what they're doing and this takes three different properties it takes a success we're going to call this a success location function an error location function and it's going to take an option for optional parameters in our case we want to just enable high add accuracy so we'll say enable high accuracy true that way it's going to be as accurate as possible in finding your location so now let's just right here these functions we'll say success location and we're going to have a function called error location and our success is going to take in the position and we're just going to log that out so i say console.log position just like that and it says you want to allow the site to know your code location i'm going to click allow and now if i refresh the page and if we just inspect this page by hitting ctrl shift i and we come in here we can see our geolocation has a chords object and in here we can see our accuracy our latitude and our longitude and you'll also notice i have this sensors enabled which allows me to essentially fake my location for any latitude and longitude i want i just picked london in this case and to get to this you click the triple dots in the chrome dev tools go to more tools and then click on sensors that's going to open this section up where you can change your actual location in our case we changed ours to london so as you can see this latitude and longitude coordinate with the latitude and longitude of our faked location so we know that our latitude longitude are correctly being picked up i don't actually live in london but we're just going to be faking that for this video so in order to actually tell mapbox to zoom into a certain location we can actually pass that location to our creation of a map so let's just create a function we're going to call this setup map and here we're going to pass it a position for now we're just going to create that function setup map and inside this function we're going to take a center this is going to be our latitude longitude center and in here we're going to create our map object and we're going to pass it a center which is that center then what we can do is create our center and our center is essentially an array that is our latitude longitude but map box is kind of weird and it makes you put the longitude first and the latitude second so we're gonna pass it an array and if you remember right we have position dot chords we just look over here position dot chords dot latitude or dot longitude and remember longitude comes first inside of mapbox and we can copy that and do latitude now we just save this you'll see that it's going to zoom me into london but something interesting happens in that the map is super zoomed out we need to specify a zoom level so we can play around with different zoom levels i'm going to put in 14 as our zoom level we'll see how that looks if i save you can see it zooms me into london and it's fairly close if we change this to 15 it'll be even more zoomed in which i think is better for you know when you're doing directions you want to be fairly zoomed in to where you are so right now it zoomed us in and if we zoom out a little bit you can see we're essentially in the dead center of london which makes sense because that is our current location that we're faking with the chrome dev tools so right now we're handling this success just fine but what happens if there's an error we can actually test this inside of chrome by just going and instead of saying london we can say location unavailable this will give us an error and now if we just refresh our page over here you're going to notice something interesting our map never loads because what's happening is we're getting our current location and we're calling this error location which never calls setup map so what i want to do is just set up our map with a default location in our case i'm going to use manchester so we can just say negative 2.24 and 53.48 this is rough latitude longitude for manchester now if we save this and we zoom out a little bit you're going to see we're essentially in the center of manchester as you can see so now in order to make this more like google maps what we need to do is we need to add a set of controls so we can zoom in and out our map by clicking on a plus and minus button and most importantly we need to add the ability to find directions and luckily mapbox has all this baked in for us so if we just come over and try to view the documentation of mapbox which we can click this icon here and just click on documentation this will bring us to the documentation and we want the mapbox gljs documentation so we're going to read that documentation because mapbox has a bunch of different documentation for tons of different objects and we want to search here for some controls for navigation so if we search navigation you can see we have navigation control and let's read that documentation essentially this controls zoom buttons and a compass and you can see to create it we just create a new navigation control passes some object or options sorry and here it tells us how to actually use this so let's just copy this code come in here let's just obviously update this with const because nobody likes far we're going to create a const nav and here we want to add that to our map and we're going to not specify a location that'll default us to the top right and when we save this you can see we have these plus and minus buttons which we can use to zoom in out and use them to rotate our map we can even you know rotate really fast whatever we want to do we have these controls now that we can use to navigate and it's as simple as these two lines of code it really doesn't get much easier than that and best of all mapbox has quite a few plugins and one of these plugins is built around directions so if we search for direction we can see the mapbox gl directions plugin click on this and bring us to this github page if we scroll down you can see exactly how to create one of these mapbox directions you can see all we need to do is pass it our access token that's pretty much it to get this working so let's just copy all of this even this section down here we just want to paste this after our nav control we don't need to create our map because we already have a map we don't really need to worry about units or profile it'll just default us those all we need to do is our access token which if you remember right we have saved on this object here we can just copy this over paste it in as our access token and then we can add the directions we're just going to add them to the top left if we save this go back to google maps clone you're going to notice it's not quite working as expected so let's take a look at why if we just inspect we should get an error says mattbox directions is not defined and the reason for that is we need to actually include map box directions right here they're requiring it with npm but we want to not do that we want to use the cdn so let's just click on this live example down here and see if there's a cdn option as you can see right here they have the script tag for the mapbox directions and the css for mapbox directions i just want to copy this and paste it after our mapbox scripts up here we want to make sure it's before our actual script tag so paste that in fix all the spacing save that now if we go back you can see we can choose a starting location and a destination and we can choose traffic driving walking cycling etc let's choose london and we're going to choose manchester and there we go we now have directions from london to manchester and if for some reason we're psycho crazy people we could choose to walk this by clicking the walking directions and now in only 55 hours we're going to be in manchester and that's all it takes to create a simple google maps clone if you enjoyed this video make sure to check out my full javascript course linked down in the description thank you very much for watching this video and have a good day

Channel: Web Dev Simplified

Views: 47,824

Rating: 4.9671278 out of 5

Keywords: webdevsimplified, google maps clone, mapbox js, mapbox, mapbox javascript, google maps clone js, google maps js, google maps js api, google maps javascript, mapbox tutorial, mapbox react, geolocation api, geolocation, geolocation js, geolocation javascript, javascript map, js map, javascript mapbox, js mapbox, mapbox gl, leaflet js, mapbox js api, mapbox directions, mapbox api, javascript world map, js world map, js globe, javascript globe, js, javascript, wds, mapbox gl js

Id: OySigNMXOZU

Length: 12min 23sec (743 seconds)

Published: Tue Nov 10 2020