Google Maps & Google Places in React

hey how's it going it's Lee Halladay and we are going to learn all about Google Maps today and how to integrate it into react we'll also be looking how to integrate Google Places and we'll take a look at the browsers geolocation functionality so this is the app we're building what it does is it allows you to find your location so you can search for it say you're camping up at Algonquin Park and what it allows you to do is basically click on the map to add a bear marker so imagine this is like a bear spot or application for backcountry campers so if you find a bear on the trails you can click this onto the map so that other campers they can pull it up and see where the Bears are so we have the ability to search this is with Google Places you can also click this little icon here and it will use the browser's geolocation to pull you in to where you are so I'm in Toronto right now so if there are any bears say over here in Queens Park you could pop that on the map you can click into this and you can see that there's a bear alert spotted today at 3:29 p.m. so this is what we'll be building and let's switch over to the code now so I'm gonna pop out the finished version and grab the starting version so sadly our map is now going to look like this and just say the word map but we'll build it back up to where we were before so I've already added all of the packages because I can't remember all these things and I've got all the imports sort of lined up that we're going to be using in this application but the main packages we're covering today are react to Google Maps / API we'll be looking at date FNS to do that date formatting of when the bear was spotted will be using use places autocomplete to manage that that search box up at the top will be using a reach combo box to display the search results and they'll be using some built-in browser functionality and a ton of different react hooks use state use wrath use callback to make all of this come together so let's get started anytime you're working with Google Maps the first thing that you're going to need is a google map API key I've already set it up I'll include a link of where you find that you go to like the Google API console and you create a new one but there's one thing you need to keep in mind and I wrote this down here you need to enable 2ap is for this to work the Maps JavaScript API and the places API if you forget one of them the map may work but the places search won't etc so you got to make sure both of those are enabled it's the second thing to keep in mind is that you don't want to just paste the your API key in your code that's typically bad practice because now anyone who's searching github can find your key pretty easily so even though it's going to be exposed on the front end because it's a client-side API key it's good practice to put it into environment variables so with create react app you can use a file called dot n dot local and as long as you name your environment variable with react underscore app underscore create react app will pick it up and make it available so I've already done that here and now inside of our App component it's time to load the Google API library so react Google Maps slash API this package here it comes with a hook called use load script so we're gonna put this at the top of our file so use load script and what you do is you can pass some an object here with Google Maps API key so this would be the one we loaded into the environment variable so we'll do process end and that would react app underscore Google Maps API key is what I called it and because we're doing not just Google Maps but also Google Places search you need to enable additional libraries when it loads the the Google script so you can do that by passing in a libraries option where you pass the libraries that you want so we want the places library as well and what this hook gives us back is is loaded and load error so two variables that we can use to know when our Google script is ready so that we can move on and start working with the map and what I'm actually going to do is I'm going to put this into a variable outside of our component Const libraries is places like this and then we can just get rid of this so that it uses this variable here so why did I do that I did that because um react whenever it's sort of re-rendering it does a div basically sometimes to see if it needs to re-render and arrays in objects anytime you sort of use them as literals it looks to react as if it were a different object even though it's the same sort of details within it and especially with this library react Google Maps API it sometimes detects it like rear Enders weirdly and it resets your map to the center I'll show you how that works in a little bit but this is to avoid too many rear Enders so what we can do here is we can add a couple of statements so if there was a load error let's just say error loading maps and if it is not loaded we'll turn loading maps like that and so if we get to this point below that means the Google scripts are finished let's just make sure it's also loading so it's so fast you can barely even see that it's just loading here but it's now time to move on to the map itself so we are using a component called Google map so let's put this in here like that so for now we'll have nothing inside of it later we'll add markers and info windows inside of there but to make this work we have to add a few props to it so the first prop we need to add is the math container style and same thing to avoid re-renders I'm going to put this into a variable up here so const map container style so here we're going to set the the width and the height of the div that they put around the google map the map takes up the space of the container it's in so if you don't have it set at a hundred percent width and a hundred vh height you won't see the map at all so that's why we're doing this so width 100 VW will do and height will do 100 VH cool so there's a few other things we want to add to this the next thing is the zoom level so let's say we're going to start at zoom level 8 that's fine and we also have to tell it where to position the map so we'll call it the center and create a variable for that here so it wants the lat and the long so why don't I go find that for Toronto I've already pre searched it so 43 there and the LNG for longitude is minus 79 pop that in there cool so with the map container style the zoom and the center we've loaded the Google script so hopefully there's a map showing up go back to the app and there we go so here's our map we've got it zoom level 8 centering on the latitude and longitude of Toronto and this is the default look and feel of the map when you just set it up so it comes with you can switch to satellite view you can drop this little person on the map you can zoom in and out we can override this now to make it a little bit more custom so going back here I am going to pass in some options come back here and set options okay so the options we're going to set first of all are the styles and you can override the all the colors and stuff of Google Maps I'd say the best place to find them is on this website called snazzy maps so I have already found one that I like this color here and I've copied all of the styles it's this big basically JSON of it's an array of little objects that turn on and off all the different features of a map so I've copied that and I've pasted that into a file called map styles so it's just exactly copy and paste and I've exported that as a default so back over here in the app I believe no I haven't imported it yet so why don't I do that now so import say map styles from map styles so I've got that into a variable and now I can set the map styles just like that so if I come back to the map it's now the color that I wanted and the next thing I can do is I can remove all of these sort of UI elements that I don't necessarily want in in my application so another option you can pass is disable default UI true so that gets rid of literally every single one of these controls and then we can add back the ones that we want so we'll come down here and we want the let's just say the zoom control so load the map up so now I at least have the the ability to zoom in and out and that's what we want to do now so the next thing I want to add doesn't really have to do with the maps but I wanted to add this little logo up in the top left so let's go down here and I'll just put this outside of my google map so I'll do an h1 this is bears and let's add a tent like this so it's going to complain because of whenever you have an emoji you're supposed to wrap it in a span and then on the span you're supposed to add role as an IMG and area label tent just like that so I look at now I have this bears thing in the top-left so by default an h1 wouldn't show up there like let's say that I made this in h2 it's gonna like pop it above the map and shift the whole map down so what I did to make that work is to basically add some styles so I styled the h1 I just positioned absolute it top left and I had to set the Zed index I don't know if I need 10 - might have been fine but go big and that makes it stand up in front of the over top of the map so we're going to be positioning a few different UI elements like our search in the middle here and our locate me on the top right but it's already starting to come together so the next thing I wanted to add is the ability to click on the map and to detect that click and wherever the user clicked to basically save that location into some state so that I can render markers on the map for that position so going back to the code what I'm going to do is I'm going to add an on click like this so normally you can just pass a function in but every time this thing rear Enders like every up to every time you update state because it views this function as a different function it causes some weird things with this package and maybe will actually try it that way and then we'll fix it later so what we receive is an event and I forget what's in this event so let's just look at the the console come back here so wherever I click I'm given some information one of the things I'm given is the latitude longitude of the location that the user clicked so we're going to use this to add this information to some state in order to added the state I need to set some state up so why don't we just say we got some markers and we'll have a setter function called set markers and this will use react use state and we'll start it off as an empty array and when the user clicks what I'm going to do is I'm going to call the set markers function so set markers this is the state setter function and there's sort of two ways to use it you can just pass in the new state but if you're basing your new state off of the previous state you can actually pass a function in where the old state is passed to you as a value so we'll receive the current state and we'll return the new version of it so we'll spread in the current markers and then we'll add a new marker here so I wanted latitude so that was the event dot lat LNG lat and it's a function call weirdly enough LNG was same thing event lat long dot LNG and why don't we put the current time that I'm clicking so let's just do a new date like that so I'm clicking around there's no way to really see what's going on right now so I'm going to look into the components app so if I look at my state here I've got these three elements in the state the the different places I've clicked so you can see every time I'm clicking it's adding a new state the only thing to do next is to start rendering these onto the map cool so how do you show markers on the map you render them inside of the Google map component so we've got markers and we're going to map them so for each marker we want to show a marker component that comes with the Google Maps package that we're using and there's a few props we need to add we need to add a key because we are we're iterating so we need to make it unique for react so why don't we just use the time hopefully to people don't find a bear at the exact same time that would be bad news so we'll do marker time and what's the function I always forget one second it's new date - I so string we're going to use two as is Oh string to make our key and we need to say what position to show this marker at so this is an object with latitude so marker dot lat and LNG marker dot LNG just like that so now when I click around we've got markers showing up where the user clicks which is great all right the next thing I wanted to do is I wanted to give the ability to when you click the marker to have it show an info window but before I do that why don't we make this icon look a little bit sweeter let's make it look like a bear so you can override the typical red marker that comes with Google Maps by just setting the icon prop and you need to pass in a bunch of settings I mean the only one you really need is URL so I've loaded an SVG inside of my public folder so I'll just load the bear SVG and if I were to click the map now I have the biggest bear in the world completely useless so now we can override the size and sort of where to anchor that in relation to where the user clicked for the the latitude and longitude so we'll come back and we will set the scaled size and to do this you need to do new window Google Maps dot size so we're going to make this 30 pixels by 30 pixels we can also override the origin and anchor so this maybe we can actually see so now when I click see how the bear sort of showed up above where I clicked rather than right in the center we can fix that by setting the origin so new window Google Maps point so origin will just do 0 0 and then anchor new window Google Maps dot point if you set it to be sort of half of the size it will position the anchor in the middle so we'll do 15 15 like that so with that in place when I clicked it puts the Bears nose like a right at the pointer where I click so now that we have sort of setting state it's showing up on the map what I wanted to do is show you how you can avoid sort of recreating this function on every single render of our application so to do that we're going to introduce a new hook called use callback so what I'm going to do is create a variable called on map click and this is equal to react use callback and use callback is used sort of anytime you wanted to find a function that shouldn't ever change unless the the properties passed inside of these depths array change so if you do nothing at all that means this function will sort of always retain the same value never ever triggering a rerender because we react think it's a it's a different value so this function here is basically just going to be this arrow function that we created here so a pond map click will go up here and the rest should be the exact same so use callback allows you to create a function that will always retain the same value unless the depths change past in here so still works the same while we're here we're going to need this for later let's set up two additional refs sorry two additional variables one to retain a ref to the map itself like the actual map instance will later use that as we're searching to like programmatically move where the map is to pan and zoom so we're going to say map ref is equal to a new user ref and we're going to do another one of these callback functions to basically it's a callback function that will be passed in when the map loads that gives us the map that we can then assign to the ref for use later without causing rear Enders so this will be on map load and it will be react use callback Erol function no depths and this one will receive the map itself as passed to us from the Google Map component and what we'll do is we'll save map raft current is equal to the map so by saving this reference to the map to our user F we can now access it sort of anywhere we want in the code and it won't cause any rear Enders or anything like that so you use state when you want it to cause react to re-render and you use ref when you want to retain state without causing rear Enders so now this on map load I can pass to the on load prop of this package just like that okay so we're not using that yet but set it up for use later when we add in the search and the find me location so we've got the mark markers in state but what we haven't done is added an info window when you click on one of those little bears so that's what we're going to do now we're going to create some new state to store what is the current selected marker that the user wants to see details for so let's put that into some state called selected and set selected and it will start out as null and it will get its value when the user clicks on the marker so keep this in mind we'll go back down to the marker and we will add an on click event which will receive function that's called when the user clicks and what we'll do is we'll just call set selected and we'll set the marker sort of as it's iterating and drawing these markers on the map it will pass in the marker that was clicked aligning with the marker that's being rendered so by doing that if I draw one of these little bears and then click it you can see here in the second state here we've stored the marker that was currently selected so we got the array of all the markers here and the currently selected one here all right so we're setting the state correctly but we're not displaying it anywhere yet so what we're going to do is we're going to look to see if selected has a value and was a ternary here so if it does we will show an infowindow house else let's just say no nothing so in here we can do an info window like that so infowindow is a component that pops up that little white window and it can take one child so we can put a div in and then we can basically put any HTML we want inside of that div so what I'm going to do is just put in h2 and just say bear spotted and then in a paragraph below I want to put the time that the bear was spotted so I can do spotted and remember that we've got selected time as a stored for the time that the user clicked that marker so I'm going to use a function from date FNS to format time relative to now so it's called format what's call again format relative and it takes two dates and it compares them and then spits out a string of like a nice user-friendly of when this thing occurred in relation to now so the first one we are going to do is the selected time and the next one will just be our current date just like that so what we haven't given the infowindow yet is where to position it so just like a marker we have to add a position that has a lot so selected lat and an lmg selected dot LNG and with that it should be showing up cool bear spotted spotted today at 3:53 p.m. click it again alright see how is it it's not showing up since the first time what I need to do is basically listen for when the user clicks that X to make sure that I set my selected state back to null so that it can reopen again later so what I'm going to do is I'm going to add a function on the on closed click prop and when this is called I am going to set selected back to null that so we got clicked click events on both basically a click on the marker to set the selected to whatever marker was clicked and a an event on on closed click on the info window to set the selected marker back to null we're basically toggling it on and off so now a lot of bear I can open it close it reopen it close it add another bear another bear open this one close it and we have the map working so just to cover what we've done so far we have covered basically how to use Google Maps in react we've styled it we've positioned the center we've listened to click events on it to add markers to state we render those markers out onto the map and when the user clicks one of them we show an info window box next up we are going to add the Google Places search so when the when the user selects the position we'll recenter the map over whatever position they selected and we'll also add this little icon here to position the map to wherever the user currently is to add Google Places search to our component I need to uncomment the packages that I commented just so that I wasn't seeing the air that wow you have you've imported stuff you're not using but what we're using is the use places autocomplete package and from that we'll be using a few different things some functions and a hook that it comes with and we're also using the reach combo box to display things nicely to the user and accessible by default and to build this from scratch would be a ton of work why do it when reach combo box works awesome so what I'm going to do is I'm going to come down inside of why don't we put this just in between our h1 that shows the bear with the tent and our Google map and we will create a new component called the search that for now won't receive anything but eventually we'll be passing a function down to it so that when the user clicks the location that they're trying to search the map will pan to that location so I haven't created this yet let's just put this in the same file below our app so here we'll a function search which for now isn't receiving anything and we need to set up the Google Places autocomplete so this one uses a hook and the hook gives us a whole bunch of stuff but what it's called is use places autocomplete and you don't have to pass anything to it but you can pass all of the sort of options that you're maybe used to using with Google Places search like if you wanted to to prefer locations near some location so for example we will set this up with request options and the options that we're going to pass our location and with a latitude and a longitude so what this does if the users searching it will sort of prefer places near this location that you're passing in so why don't we just prefer Toronto for now but maybe you would prefer locations near where the user is but we'll just copy this latitude actually let's copy both like that and we will paste this in so you're not done yet what it actually wants to receive is a function that it can call and get the value so we'll just convert these two arrow functions that return this value and we also have to pass a radius whenever we're using this option to basically say here's the middle point how far around this middle point do you want to prefer relocations for so why don't we say 200 kilometers but it actually wants it in meters so we will convert 200 kilometers to meters by just multiplying it by a thousand because of the thousand meters in a kilometer and back to what this hook gives us in return so it gives us a number of variables in an option or in an object that we can deconstruct the values from the first one is ready is this thing set up and ready to go does it have all the Google search scripts loaded with the correct libraries and that should be good because we did that up here above using our other package with the youth use load script and we passed in the places library so that one should be good but just have it there anyways what is the current value as the users typing this into the search box what are the suggestions that we're getting back from Google's API along with a status and the actual the data of those suggestions themselves a function to set the value and another function to clear out all of the suggestions so save that it starts to format everything but we haven't used it all at all yet so what I want to do right now is start to set up the reach combo box and that's what we're going to be returning so reach combo I've already inputted all thank goodness I don't have to to memorize it we started all off with a combobox component and this receives we want to use a prop called on select that will eventually receive the address that the user has selected for now why don't we didn't do that right equals an arrow function like that so this receives let's say the address that the user has selected for now why don't we just console dot log it out so save that okay and what do you pass inside of the combo box we need to basically pass two children in here the first is the combo box input combo box input this is like your typical input so whenever you have an input that you want to control with react you have to give it the value to display so we are getting the value from our use places autocomplete hook so I'll just pop that in here we need to listen for when it changes so when the user types something in so we can just put an arrow function in here that receives the event and then does something with that event so what we are going to do is call the set value function passing in the value that's currently inside of the event that's given to this onchange callback so this would be a target dot value like that okay next thing we want to do is this combo box input we don't really want it to to be not disabled unless um this is ready so we'll say you are disabled if combo bar or if use places autocomplete is not ready it should be but just in case and why don't we give it a placeholder as well so placeholder will be enter an address okay let's load the page and make sure that it's still working so it put the address up here at the top I want it to like hover over the map and I've already set up a class to do that called search so I just need to wrap this thing in a div to make it display correctly so combobox you are in a div with a class of search come back here now it's nice but if I search for something it's not showing me any results yet that's because we have to implement the combobox popover combo box pop over cool so what does combo box popover receive it receives all of the suggestions that google places has given us so the first thing we want to do is we just want to make sure that the status is okay so triple equals okay this is given to us in suggestions which has status and data so if it's okay then we can map over all of the suggestions we can just do this short circuit trick to say and let's map the suggestions so data map we will say each suggestion gets passed to an arrow function and we can deconstruct an ID and a description that's available on each suggestion so what are we actually going to render out we will render out a combo box option just like this and what has passed a combo box option we need to give it a key because we're mapping and we need to give it a value which will be the description so now if I go back and I start searching we now see the results below in our combo box pop over and when we select one of them we can come back here and because we console dot log out the on select it shows us the result here so we obviously want to do something with this string and what we want to do is basically convert it to a latitude and longitude so that we can then reposition the map to whatever latitude and longitude that is got to stay fresh with this water all right so we've got this on select um callback function here on the combo box and we're going to use two functions that come with this use places autocomplete package so those are get geo code oops get geo code and get lat/long I'm just going to copy these so I don't forget what they are all the way down here to the bottom and search okay so this guy here we are going to make this an async function because we're going to be using promises and we're going to wrap this in a try-catch in case there is an error so catch that rejected promise and let's just console dot log they're so not super useful but at least it won't explode in the users face or anything like that so what we want to do the first thing is we want to get take this address and pass it to thee was that function get geo code so what this will do is it will return us some results that we have to wait for because it's a promise and what we need to pass to get geo code is an object that has an address property of whatever address the user searching for we've received this on the select in the combo box so we can just pass this in like that oops what I do all right so with this sorry not one result many results we need to basically take the first result that Google returns to us but why don't we first just take a look at what they look like and let's just grab the first one see what it looks like comment out this okay so when I search Algonquin Park I click in here it gives it back this big object so it's an array of these that have a address components geometry location location as latitude and longitude that actually what we want but this package comes with a helpful function to basically extract that for us so it extracts the latitude and the longitude when we await for a call to this function get lat/long and we're passing in the first result so it will basically give us back the latitude longitude we can confirm that by just commenting or console dot logging that out so come up here again search Toronto and we have the latitude and longitude of Toronto so now that we have this what we want to do is take this latitude and longitude and call a function to basically pan the map to that location so to get that working what I'm going to do is first go and create that pan to function so I'm going to create it way up here in our parent app component we will call it pan 2 and we will use the react use callback so that its it only ever creates one of these functions and this function will receive the latitude and the longitude that the user wants to pan to and inside of this function with no depths meaning you never need to change the definition of this function what we are going to do is access this google map ref that we had set up way back in the beginning of this video so map ref current and we want to call the pan to function with the same name that receives the exact same parameters a latitude and a longitude and we also want the map to maybe zoom in a little bit to that location so we'll say map ref dot current and we can call a function called set zoom and why don't we just zoom in to a level 14 which is pretty zoomed in to the map so now that we have this function why don't we pass it as a prop down to our search component so pan two is equal to this pan to function so now our search can receive the prop pan two here and we can call pan 2 with the latitude and longitude that were given to us by geocoding this address getting the results converting the first result to latitude and longitude eventually passed up to pan 2 that we just created to reposition the map so now I can search in Algonquin Park when I select it the map pans to that location zooms in but you see how we still have these search results showing up here and we still have the the search value here what we can do is a couple things the first thing we maybe want to do and we can do this even before the try-catch is we can call set value again to be with whatever address the user selected so set value is equal to the address but they have a second argument you can pass in should fetch data and we can say false because we already know what value the user selected we don't have to go to the Google API and query that it's already been done so we just say false this is something special that comes from the used places autocomplete hook and another thing we can do is we can call this clear suggestions I think I messed that up it's got an S on the end cool the clear suggestions function to clear that out so we no longer are showing all of the suggestions to the user let me just clean up some unused console logs and just quickly cover this when a user selects basically clicks or tabs - and hits enter one of the suggestions that we're showing we will call the set value to basically update state and place whatever they chose in there without going to Google and fetching new data will clear out all the suggestions so that we're not showing them all to the user we'll take that address and we'll call the get geocode function to get some results and then we'll get the first results latitude and longitude that we can then call the pan - function that we created so let's try this out go back to the map search in Algonquin Park so I'm selecting it so two things happen a it selected it it put its value whatever I clicked on inside of the search box and it also cleared out the suggestions it panned us to this location and it zoomed in so we can now click on the map and add some bears to that location the last thing that we're going to do in this video is we are going to add this geolocation a button to the top that when clicked it will use the browsers built-in geolocation to get us the latitude and longitude of the user if they give us permission and we can then call the same pan to function to bring the map to wherever the user is for this button I'm going to create another new component and why don't I just put it above this search component that we just finished creating and we will call this one locate it is also going to receive the same pandu function that we used in the Google Places search and what it is going to return is a button and inside of this button we are going to place an image so image' SRC like that it's a little bit messed up but okay so I already have a compass SVG image that we're going to use so I can say compass dot SVG here it wants an alt tag so we'll just put in compass locate me like that what's it I messed up something oh there we go this thing and I messed up this thing Arielle okay so I believe for this button to be positioned correctly I need to use this locate clasp on it so let me add that classname locate and what I haven't done is actually used this component inside of my app so I'm going to go up I will put it just below here so locate we'll pass it the same pan to like this so it should now be showing up in the app whereas my browser cool so we got this button up here in the top right but it's not doing anything yet and you know what I think I messed up the combobox because I have an unused list all right let's find out where that goes let's fix that first so I believe it should have gone here inside of the combo box pop over let me just check the done one yeah just inside of the pop over sorry about that so combo box list there we go I think it should still work hopefully all right so we fixed that sorry about that returning to the locate function that we were creating we need to add an on-click callback prop to this so this will receive a function and inside of this function we are going to use the browser's built-in geolocation so because I forget how that works I've got it open here so it is navigator dot geo location dot get current position I'm just going to copy this whole thing so often you see code that basically checks if the browser has a navigator in a geolocation I'm just going to make the assumption here that it does have it because pretty much every modern browser has it now it may fail if the user doesn't have that but that's okay I guess so get per current position gives us two callback functions one if there's an error and we are going to handle this with the good old function that does nothing because I don't want to handle an error here and the success so the success function will do something so this gives us a value and I think it's called we'll call it the position and why don't we take a look at the position so console dot log position okay and we don't have any options we can just get rid of this back here so when I click this it takes a second it's doing the geolocation because I was building this app earlier it doesn't ask me again because I already gave it permission but you can see how up here in the top right hand corner that this page is allowing geolocation tracking and it gives us this geolocation position which has cords and cords has latitude and longitude so if we instead of just consoled up logging it wanted to call pan to giving it the latitude we've got position cords dot latitude and longitude is position cords dot longitude just like that so when you click on the geolocation button it will tell the navigator to get the current position on the success callback will get the position and will pan to the position chords dot latitude and longitude so if I'm to go back now to the app and I click why don't we move it somewhere I'm not click this location it pans over and it zooms into Toronto where I'm located allowing me to put these bearers on the map just like that and then I can open them just like before and see when a bear was spotted so this was the video it was a long one but we covered so much functionality with Google Maps in react we covered the react Google Maps API package in order to just get Google Maps up and running inside of our application we then used the use places autocomplete package to integrate Google Places search in this app but to show the results we used the reach combo box and like I messed up before I had forgotten the combo box list but we got it working and then after we did that we worked with the geolocation built into the browser to get the users current position and we integrated all of this into map functionality grabbing the ref to basically pan the map and zoom it in programmatically so why don't we just do this same cover over what we did but looking at the code so we did all of our inputs our import sorry at the top we imported the map date FNS to format out the time that the user added the bear to the map we imported use places autocomplete the combo box along with its Styles we also imported our custom styles outside of our component we set up a whole bunch of the options that we are going to pass to the Google Maps component so that we wouldn't basically have it accidentally re-rendering I can show you what that looks like second I want to copy that and pass that to Center so let's say we're over here we add it to the map see what it recenter it did add the bear we're up here we up there but it brought us back to the original center location that's because it thought that the center value had changed so it wanted to like take the back the map back to this center and the reason it did that is because it doesn't do like a deep equality check on this object it thinks it's a different object even though it's valued and change so by putting that into a variable we can basically stop that from happening so that's why I did all of this setup above to put all my map options inside of variables we set up a whole bunch of state and callbacks and rafts and stuff but the first thing we did is use load script hook to set up the Google script because if you go into the browser and you inspect the elements up here in the head you'll see that somewhere in here actually there's a bunch of them it looks like but we've got this script tag that Lowe's Google Maps so this needs to be inside of your head and we didn't do that ourselves we basically just use this hook that hadded it in with our Google Maps key that we had set up using environment variables we set up some state to keep track of the markers what was currently selected and then we added a whole bunch of different uh functions using use callback so that it's it doesn't recreate this function every time and I won't go over those but yeah down in here we created three sort of main sections of this code our Google Places search our locate button and then the map itself and the map itself is showing the markers and when one of those markers is selected we show the info window hope you enjoyed this video I'll share all of the links to the source code below if you're still hanging in with me I'd love for you to subscribe I'm doing new react in JavaScript videos every week hope you're doing well take care

Channel: Leigh Halliday

Views: 86,016

Keywords: react, react tutorial, google maps react, google places react, google maps tutorial, google places tutorial, browser geolocation, browser geolocation react, google maps markers, google maps info window

Id: WZcxJGmLbSo

Length: 53min 8sec (3188 seconds)

Published: Mon May 18 2020

Reddit Comments

[u/Rawdyn]

Love your work Leigh. You always choose such relevant topics and explain things so clearly. More than once I've used your videos to go off and add something to a client's system. Geeze, even when you do a video on something not on my radar, I pick up little things. Great work, don't change a thing.