How to show directions on a map in React

[Music] hey it's Lee Halliday and today we're going to use the new vigl react Google Maps package combining with the direction service to render some directions onto the map and give the user some choices of which route they want to take so we're working inside of nextjs and I have some imports already set up at the top of the screen and we'll see sort of how to use these as we encounter the need to access um these components or these hooks but the first thing you're going to want to do is make sure that you run npm install at v.g l/ react gooogle maps to get your package up and running in place now right now we're just returning a div that says map so if we look at the browser we say this wonderful map like that so the first thing we need to do is sort of replace this and actually show the map and in order to do that we need to use the API provider to go and load all of the different libraries combined with our API key to get up and running so we'll paste this component right here and it needs access to the API key and I've already taken that and I've put that inside of a .l file so that I can sort of have that available in an environment variable without having to commit that to my repository now this will be publicly available so you need to make sure to restrict access to your API key uh for whatever website that you're publishing this to so that people can't sort of copy your keyy and use it on their site so we're going to say process.env and it's next public Google Maps API key perfect so we won't see anything yet on the page but that's okay we're moving in the right direction so when that's in place we can basically render the map onto um the screen so we'll say map just like this and I'm actually going to do this because eventually we're going to put some some directions inside of the map and the map needs a couple things to work it needs a center sort of where are you going to position it when that when it first opens up to the user so we're going to use a variable called position and we'll just pop up here and we'll set this up so that's going to be an object and we need to set the latitude so the latitude I'm going to use is sort of right downtown in Toronto so it's 43. 6532 and the longitudes so LNG is -79 3832 like that so with the position in place we have the center set up and you also need the zoom level otherwise it won't work so those are the two things you need to have set up so if we come back You' think it would work but it doesn't and so one gotcha is you always have to remember to give whatever container you're rendering the map into so that would be this div right here you need to give it a height so we're just going to style this in line and we're going to give it a height of 100 uh VH and just for the heck of it although I don't think it's needed we're going to give it a width as well as 100% so basically take up the full height and the full width so if we save that we now have a map rendering out onto the screen in Toronto things are looking good so what we can do sort of as our next step is I can add a map ID to this so we'll say map ID and that's also in an environment variable so process. n. next public map ID so this is a map ID I already set up and it's got some styling attached to it so now I get the dark mode of the map and you'll need to use a map ID if you're going to use things like Advanced markers and and sort of advanced functionality so it's a good thing to set up a map ID and as a bonus you get to style your colors really easily as well the last thing I'm going to do is sort of remove this full screen button at the top right here cuz that's going to interfere with sort of the directions I show in that same uh general area so we're just going to say full screen control is false and we can turn that off you see that it disappears awesome so with the map set up what we're going to do is render some directions onto the map so that is a component that doesn't yet exist so I'm going to come down here and set this up and for now we'll just have it be sort of returning null returning nothing just to get it working make sure that there's no errors on the screen great so the first thing we're going to do is we need to basically uh first get access to our our map instance so we'll say const map is equal 2 so now we're going to use the third thing from the library uh or fourth thing but the third one we're using so the use map hook will return us back an instance of the map we're going to need that to give to the directions renderer so that it knows what map to render the directions onto and the next thing we need to do is sort of dynamically load a library that will give us aess to access to the directions service and the directions renderer so this is the roots library and this is the fourth thing from react Google Maps it's another hook called called use maps library and the library we want is routes cool so we're going to be setting up some additional state but first thing we're going to be using sort of uh use effect hook to to listen for when these are available to go and uh create instances of the directions renderer and the directions service and once we have those set up we can use the direction service to get us directions between two uh sort of start and stop locations or origin and destination it's called so we'll set up use effect right here and we need to pass in our dependencies so this use effect is specifically for initializing the services and we're going to be waiting for the rotes library and the map to be available just like that so we'll put those in our dependency list and we're going to say if there's not a routes Library yet or there's no map yet uh we'll just early return and basically if we get to this point we know we have access to the routes library and the map so we can start to sort of um create instances of the directions service and the directions renderer so we could create instances but where are we going to put those we need to set up some state to store them in so we're going to set up some State here and we'll call this the directions service and then set Direction service and that is going to be used State like this but because we're working in typescript we want to give it a hint of what kind of state we're going to be storing in it so this will be google. maps. directions service and if you're not working in typescript you can just sort of omit this part of the code and things should sort of work work fine so I'm going to copy this whole thing to just save typing that out and making mistakes and what we want now is the directions renderer so we'll just change that to renderer and we'll change this to renderer as well just like that cool so we have the directions service and the directions renderer they're going to work hand inand to find the directions and then render them onto the map and now we can create instances of them and store them in state so what we'll do is we'll call set directions service and we're going to pass in a new instance of so using the dynamically loaded routes Library we can instantiate the directions service and for this one we don't have to pass anything into it um but for the next one the set directions renderer is going to be a new instance of the routes Library do directions render we are going to pass in the instance of the map so that whenever use it it sort of knows what map to render things onto cool so this effect should be in place um if we just want to come down here and maybe add a console.log to to make sure that we eventually get a direction service we can reload the page and it's sort of the first couple renders it's undefined but eventually we have it's not much yet to look at but it's the thing we're going to call and and find a route between an origin and a destination all right so the next thing we need to do is we've sort of used this a hook this hook to initialize the services and we're going to use another hook and this one to basically go and find a route using the direction service so the dependencies for this one are going to be we need access to the directions service and the directions renderer so inside of this us of fact we're going to do this check as well so we're going to say if there's no directions service or there's no directions renderer uh early return if we get to this point we can use the direction service so we're going to called Direction service and it has a function called route and we can ask for a route between an origin and a destination so our origin will just be a place in Toronto a random address so 100 Front Street Toronto Ontario and our destination will be going to 500 College Street Toronto Ontario and you can pass in additional options to to this as you call it to get the route so we're going to pass in travel mode so this could be you're walking you're biking but in our case we're driving so we're going to say google. maps. travel mode dot um driving and the last thing we're going to pass is we want it to provide us alternative routes because the whole point of this demo is that we can show the routes that are available and the user can click through them and see sort of the different time and and distance it's going to take so it's not liking dot driving but I do think oh traffic mode all right google. maps. trffic mode what did I mess up oh it's travel mode mode that's it woo so that's one of the benefits of typescript all right so then it's a promise and it's going to give us a response and with that response we can pass that to the directions renderer so set directions like this and we'll pass in just the whole response that it that's what it wants to receive and what we're also going to do is we want to store the different routes in States so that we can show them to the user so we're going to set up some additional State up here so we'll say uh routes and set routes and this is use State and there'll be no sort of an empty array at the beginning but we can tell it what um what kind of data we're going to be storing in it so we're going to store a google. maps. directions route and that will be an array of them just like that so now we can come down and we can call set routes and we can pass in our response do routes just like that so if we were going to console.log our routes we can come down here and now you can see uh it's empty the first few times as it's like initializing and finding directions and whatnot but eventually we get three different routes so our goal right now and you can even see that it is rendering the first of those three routes out onto the screen sort of going from 100 fronts Street up here to 500 College Street but there's three routes available so we want to start sort of in a box up here giving the user the ability to choose which one and then rendering the directions onto the map to see sort of what their new route looks like so let's start working on that and we're going to first start to keep track of which of the routes did they choose so we're going to set up some state for that and we'll call that the route index and set route index and it's basically just this is an array of routes which of those do you want to show so we're going to say is equal use State and we'll say that it starts with the first one like that and this won't be state but just let's put some things in variables to use later on as we're rendering them out so we want to keep track of what is the selected route so we'll say selected is route at the route index just like that and so it knows that it's going to be a route here and then from that uh selected route we can capture the first leg of that trip um now in our case we don't have multiple legs so we're just going to access the first one by default so we'll say leg is here selected and we're going to use a question mark Cuz there's a chance that it doesn't have a value so we'll say question Mark and then do legs and we'll access the first of those legs just like that perfect so now what we can do is we've got all of our information set up we haven't given the user the chance to change those yet but we'll we'll do that in a second so we're going to come down and we're going to say um if there's no leg return null and so if we get to this point that means we do have a leg to work with so we can start um rendering some things out so we'll start with a div and we'll give it a class name that I set up called directions and inside of this div we'll put in H2 and we're going to show the selected dot summary so let's just render that out on the screen and then we'll start adding and sort of layering additional information to that so if I reload this you would think it's working but I think I got my class wrong there we go so directions so the first one we're showing the summary of that is the Bathurst uh street so I guess Google figures out which what are what are we going to name this route and because we're going up BST we're going to call this the bath Street summary all right so under the H2 we can start to show some additional information about this this trip this route uh specifically using the leg uh variable that we set up here so what we can do is in a P tag we'll say leg and we'll get the start address and if we look at this you're going to see it's it's really long it's like Toronto Ontario postal code in Canada we don't need all that we just want this first bit so we can split on commas and then just get the first segment of that so we can say split on comma and then we're just just going to get the first one of that now you see it starts at 100 Front Street and it goes two and now we'll use leg. um end address and we'll split again on the comma and we'll get the first one of those segments so now we can render out we're going from 100 Front Street to 500 College Street that's the first sort of um leg of the trip that that the user has chosen so after that P why don't we put a little bit more information about it so the distance of this so the distance is leg. distance and it's not always available to to grab the text so you'll see it it gives us an error so if we just put a question mark in front of that saying if there's a distance access the text of that distance and we'll also say the duration how long this will take so leg. duration question mark . text so now we got it will take 4.2 kilm which is about 17 minutes to get from A to B but the whole point of this was let's start to show some other routes so the user can choose it and we'll render the directions so we're going to say other routes available and we're going to show them in an unordered list so in this unordered list we're going to iterate over the routes so we're going to map them and that will give us the route and the index because we remember we need the index because eventually we're going to update which one they've chosen so we can uh sort of render that um and show the the correct selected route that the user chose so we've got this and we're going to render out An Li for each of them and whenever you're you're rendering in a in a map app you need to provide a key so a key that we can use here is just something unique and each route has something called a summary and the summary happens to be unique so we can just show that and then why don't we render out that same summary in here so if we come back now we can see there's three routes available there's the BST route The Front Street and BST and the Spadina avenue Route so we want to turn these into buttons so that the user can choose which one they want to take so what we're going to do is we're going to wrap this in a button so we'll take that wrap it around there and then we're going to add an onclick of this Oops I messed something up onclick like that and it will be an arrow function so when they click this one we want to update the route of the selected one that that the user has chosen so we're going to call set route index pass passing in the index that they chose and we'll just save that all right so now you can click these and you can see that it's changing the route um I've Spa it's 4.3 versus BST is 4.2 you can see the Spina ones a couple minutes longer but we didn't see the the directions rendering on the map so what we need to do is set up one more use effect and this this one is going to listen for when the route index changes and it's going to basically um it's going to use the directions renderer to update the correct one that it's showing so our dependencies are the route index and the directions renderer just like that and we'll say if there's no directions renderer uh early return just like that so if there is one that what we can do is say directions renderer we are going to set the route index to be the route index that we're storing in state just like that so now if I reload the page we've got our first route which is the the Bathurst route but we can switch that to front Spadina we can switch that to Spina we can go back to Bathurst and sort of pick the route that we like the most and and that's the demo that I wanted to show we we started by just rendering out a map on the screen and then when that's ready we used uh um the different uh we rendered a component called directions which loaded the routes Library dynamically and then we instantiated our different services and renderer and we use a series of user effect hooks to sort of listen for when things come available or things change and then to update sort of which routes being rendered or to route between an origin and a destination and then what we end up with is a cool user experience showing sort of the different routes and it's updating as soon as the user clicks and that's really the power of react combining our state in different ways to give the user a dynamic experience hope you enjoyed the video take care [Music] bye [Music]

Channel: Google Maps Platform

Views: 12,194

Keywords: Google Maps Platform, Google Maps Library, Maps Developer, React Developer, Routes Library, Get Directions, Render Map Routes, Rendering Map Routes, Google Maps Routes, useMapsLibrary, Maps JavaScript API, JavaScript API, JavaScript, Vis.GL, React, Leigh Halliday

Id: tFjOIZGCvuQ

Length: 21min 30sec (1290 seconds)

Published: Tue Dec 19 2023