Google Maps in React - Building interactive maps

hey how's it going everyone I'm Lee Halladay and today we're going to make a Google map in react in a previous video we did sort of the same thing using map box where we took some data from the city of ottawa showing where they have all the skate parks around the city and we plotted that on the map with some markers and when you click the marker it does a pop up we're gonna do the same thing but with Google Maps this time and to get started I've got a create react app that's just showing map here right now so that's our starting point and if we get into the code first we look at the package.json I've added only a single extra package so that's react Google Maps so if you add that here to your app now we've got our app here and it is doing the basically the bare minimum so it's showing a div with map here so to get started we're sort of gonna break this up into three sections and we're going to leave the app alone right now and we're gonna start by sort of creating another component just in this same file if you wanted to you could put this in its own file but for this video we're gonna leave it here just to make things simpler and in a single file so we're going to say is we're going to have a function called map and it is going to return some stuff so what is it going to return it's going to return the the library we're using it has a component called Google map that we're going to place inside of here so we'll start importing that and that is from react Google Maps and we will start by importing the Google map itself so we'll put that inside of our map like this and I think it can be self closing for now and eventually we're gonna throw some markers and and info windows inside of that so we've got that and we have to provide the Google map a few different key pieces of information to start the first is default zoom how far in do you want this map to be zoomed when it loads for the first time and the second thing we need to load is the default Center so the default Center is basically word it's going to position the map when it loads for the first time so we need to give it a lot some number and an LNG Google always uses LNG so don't type lon like I typically do 12 okay so this is obviously I have no clue where that is in the world but let's go to a latitude I think a lot long net and we'll just type in Ottawa Theriot and we'll get that info so here's our lat and our longitude is this minus 75 here okay so on its own this is sort of all you need to get the map it's self going but for it to work inside of your react app we need to do a couple other things the way Google map works is we basically need it always a script that loads that loads all the different Google libraries and whatnot and to get that working we sort of need to wrap this map component inside of a couple other functions so make it a high order component and instead of wrapping them sort of around here I'm actually going to put that in its own variable below so we will call this the wrapped map so we're gonna wrap two things around it the first is with script J s so this little function will basically embed the Google script on the page that it needs to load for the map to work correctly so we'll say with script J s that with a big J or a little J little J okay and another one we need is with Google map so we put this inside of with script yes and then to this function you pass the map that you're going to be rendering on the screen so it's sort of adding a couple higher-order components it's wrapping a few different layers around our map component here so now that we have the wrapped map with some things in place for it to be able to work we need to actually use this so we're going to use our wrapped map in the place of where it says map here so we'll use wrapped map like this and I don't think this is going to work on its own right so to this wrapped map we need to pass a prop Google map URL so this is basically and I'm going to do it like this so that I can embed my API key eventually in there so this is which sort of you script URL that these higher-order components require to build a load the map correctly so I've got this copied and pasted in the readme because who's gonna remember all this stuff but I believe you can actually grab this info somewhere in their documentation they have an example of this is the exact same thing that I'm using here so just look for it on this page it links to this from the github repo so we'll come back and we will pass it this and okay so I have passed the Google map URL but I need to pass a couple other elements so it wants a loading element and I've got written down I needs two more as well he's a container element and a map element and these are basically just which elements like divs is it going to place this google map inside when it renders it on the screen so we'll say loading element and this is going to be a div I think it could be self closing like that and we're gonna pass a style which is basically just height 100% um and I believe that's the same that they use in their demo here yeah so two div with a style with a height of a hundred percent and that's just so that whatever container you put the map in it goes the whole height of that so we're going to have a loading element we're going to have a container element and then we're going to have a map element to so these seem to be the three other props that you need to pass and just saying what to render this thing inside of okay so there are no errors anymore but nothing's showing up on the screen and if we go and look here and the reason for that is inside of here it's it's basically just a div that's one by one pixel so that's no good so we need to basically make this div that goes around the wrapped map have a width and a height so to do that I'm going to give it a width of a hundred vertical ursery whatever that is the screen width units and we're going to give it a height of 100 VH weight height like that okay so we're making progress we have the map showing up but it's got this big pop-up and for development purposes only if we go in the console we've exceeded my request quota for this API so what this is basically telling us and below its here we haven't given it an API key so Google needs that to basically know what account to charge if you're on a paid tier you don't need to be on a paid tier if you're just demoing or light usage but you need to have an API key either way so if you go to the console dot developers.google.com and then go into the credentials and you can create an API key for this the only thing to make sure of where is it dashboard you need to make sure that your app has the Maps JavaScript API enabled you can see here I've been using this a few times well as I've been playing around with this I don't think for this demo I need the geocoding API but this is another common one if you're doing like Places lookup or whatnot so just make sure to enable this API by clicking this link but you go and you create an API key credentials copy that and we need to use that key in our app so you could just pop and key into here just like paste it in but I've actually got an environment variable set up so in crate react app if you've got a dot end dot local now you can define environment variables here as long as they start with react underscore app underscore so I've already pasted this API key in so I'm gonna copy that come back here and now I'm going to embed this environment variable in and it's processed dot end and then the name of the environment variable so awesome now it's loading without any errors because we have the API key it's taking up a hundred percent 100 VW with 100 VH height so it's taking up the whole screen it's zoomed in properly on Ottawa and it's now time to start placing some markers and click events so that we can pop open the information about the skatepark so for that I am going to import a couple things so first I want to import some data the data that has all the information about the skateparks in Ottawa in the notes for this video I'll include where I got it from but the City of Ottawa the capital of Canada where I'm from it has a lot of great open data about their city so here they've got sort of a JSON file with all the coordinates of their skateboard parks which is awesome so we're going to import this data and I think we do it as imports star as you can just say parks data from data and what's this file skateboard parks JSON okay so we've got that and we're also going to need to import a marker from this library here and the goal of this is we're going to basically loop through all the skateparks and create one marker for each of the skateparks so to do that we're going to split this into open and closing tag so that we can embed the markers inside of this Google map component so we start with parks data and we want to map over all the skate parks but first we need to see how this data looks so it looks like we have to go parks data dot features and that's an array of all the different skate parks so it features and we'll map those so each of those we'll call a park and what we want to do is basically convert each of these parks into a marker so here is where we'll have marker and like any time you map over an array you have to give it a key so we'll take this Park and we'll look at what we could use for a key so we've got properties dot park ID looks good so properties dot park ID cool and what we need now is to tell where to place this marker on the map and you do that using the position prop and it's sort of the same thing as here you need to pass an object that has a latitude melange Atun so we'll grab the lat and it is Park dot geometry dot coordinates and coordinates is an array where it looks like it's got longitude first and latitude second so if I'm getting the latitude it would be the first the element with the index of one from this array so we'll grab the one here and I'm doing something wrong what am i doing I'm missing a there we go okay so we've got our latitude I'm going to copy this to get the longitude like that and we'll say so that's LNG and it is the zeroeth index in that coordinates array so if we come back now we have all the skateparks showing up on the map so they've got quite a few in Ottawa so we wanted to a couple other things we want to be able to when you click on one of them open up a little info window that shows the information about the that Park and to do that we are going to need some state to keep track of which Park you're looking at so we'll set that up first will import the use state hook and we will say Const selected park and set selected park so this will be the value of our state this will be the setter for it and we'll say use state and it starts out as null because you haven't clicked anything yet so there's nothing selected so that's null and we'll now add an on click here and we'll pass function so when you click the marker that has this on click we want to set the current Park as it's sort of looping through them and mapping them to produce the markers when you click that specific marker we will say sell set selected Park to the park that it's currently on as its looping through okay so that should be when you click this setting the state which has the selected Park so now that we have a selected Park and if I could go into the developer tools okay when I click one of these maybe we can go in here and so these are the high order components we've got we've got our map so my the version of the dev tools I'm on doesn't do a great job of showing this the hooks state so we'll just give it a try and hope it works so the next thing we need we need to go below all the markers were mapping into our Google map and we want to include an info window but we don't always want to show the infowindow right because when you first load the map you haven't selected any parks yet so we sort of need a little ternary operator or some sort of if statements like if there's a selected Park show it's infowindow so we can do that using the react trick where you sort of use some boolean logic of whether to show something or not so we can say if selected Park is truthy and meaning go now to the next part of this statement and here is where we're going to include the info window so this is another component info window and in here we'll just save Park details for now so inside the info window is where you can include some HTML which shows additional information inside of the info window and much like the marker we need to tell it where this thing is located so we're gonna copy this position down here except this time it's not Park it's the selected Park so the one that is in the state up here with the U state hook okay so let's try this out awesome so I can pop that open ah so weird things are happening and if I reload it I can open another one so it works fine if I'm switching but as soon as I click the X it seems to like mess stuff up and the reason for that I think is that on the info window it has another sort of click callback for when you click the X to close so it's on close click and what we want to do here is pass a function to call and it will select set the selected Park back to no so if you've got an info window open you click the X that means we want to set the selected Park back to sort of the initial state no current selected value so now if we try it out pops it open closes it we can pop open another one pop open this one so it seems to be working now but let's put some more useful information in there so we'll just put in h2 which contains the I will put the name of the skatepark so properties dot name so that would be selected Park dot properties dot uppercase name and we'll put a paragraph that has the description about it where's that this API for whatever reason they get scared when the letters get too long so it's description so we'll copy that and it is selected Park properties dot description like that so now when we pop it open we can see the information about this this has a bowl which is sweet 1,700 square feet nice cool so the last thing I wanted to do is basically when I did the map box example I didn't have these sort of boring red icons I had little images of a skateboarder show up where all the different skate parks are so we're gonna do the same one or the same sort of thing in this demo and the way you can do that is you can come up here to the marker and you can add an icon property and there's two the object that you pass to this prop there's two things we want the URL so where to grab the image from so I've got an image already up here in public called skateboarding SVG so we'll tell it to load that just from our from our local crate react to setup and we need to do another one scaled size actually let's see what it looks like hi so that's why because it looks ridiculous they're way too big so we need to add scaled size and this one was a little bit weird and I had to write it down because who's gonna remember this so to size it we seem to have to do new window Google Maps dot size object and what we pass into the constructor here is the size and pixels of this icon so we'll set it to 25 by 25 pixels so now when we come back we've got these little skater guys showing up all over the city of Ottawa oh that's right there was one thing I wanted to do this is the default styling of the Google map but you can apply all sorts of cool styles to your Google Maps so I've got one open from snazzy Maps so if you were to go to the home page they've got like a ton of different styles of maps you can apply to your Google Maps and the way this works is they give you a big JSON array of styles so you can sort of take any of these and start tweaking them however you want so I'm gonna copy that and I believe I set up a file for it so I'm gonna it's just a JavaScript file and I'm going to say export default this massive array and I'm not including it in my app file because it's like 130 lines of JSON nobody wants to see that every time they're tweaking a component so we've got that in maps tiles we need to come up here and import it so we're gonna import Maps tiles from map styles and now we need to pass these Styles into our Google map here so the way you do that is I think default options and you pass it an object and this object has one I think it's called style we'll see No so maybe it's styles there we go cool so now we got the Google map showing all the markers with little info windows when you click on them they close they switch all of that we're maintaining the state we're centering the map and zooming it into Ottawa and we've tweaked the style too to make it this funky green and orange color so that's it for the demo I will just quickly rehash what we covered we started off sort of down here with our actual app component and we start off with an empty div but then we put inside this wrapped map and to the raft map we had to pass what Google map URL to use including our API key and some elements that you're going to be that the map will be rendered inside so what is this wrapped map it is basically wrapping some functions that create a higher component so with script j/s and with google map around another map component so map component is sort of where all the fun happens this is a just a little functional component that has some state so it keeps track of which is the selected Park that the users clicked and all it returns is the Google map imported from the library we're using react Google Maps here we passed it some options of where to Center it were to zoom the styling inside of it we mapped over all of the skate parks to produce markers for each of them customizing its position obviously and the icon that shows up keeping track of clicks so we know which little info window to pop up and if there is a selected Park we want to display an info window at its correct position with the details that we want to show up in the info window and we want to keep track of when the user clicks the close so that we can update our state and set it back to null so that's it for this video hope you enjoyed it if you're interested in the map box version it's the previous video I uploaded on my youtube channel um I'd love to hear what sort of topics you'd like me to cover I've got a list of them myself but it's great to hear from from the viewers what people are actually into so it's not just what I'm doing hope you enjoyed it have a great day bye you

Channel: Leigh Halliday

Views: 135,878

Keywords: react, javascript, google maps, maps

Id: Pf7g32CwX_s

Length: 25min 2sec (1502 seconds)

Published: Thu May 02 2019