The Ultimate Guide to Google Map Integration in React Native

[Music] hello guys and welcome back to the rising tide now in this video I'll be showing you how to integrate a Google map service in general Maps into your react native application as you can see I have a react native application with the Google Map set to this default location so I'll be showing you how to integrate a map like this I also be showing how to uh get your current location and when you focus on it for instance when you click on this but and it is going to uh move to your current location it's going to get your uh location and it's going to navigate your location so as you can see here uh this is my current location I am somewhere in Cameron right now so um this what I this is what we be doing in this video I also be show you some customizations for this such as uh changing this uh um marker to something else a custom image I also be showing you how to add U call call outs and other functionality so if that's interesting to you please subscribe to the channel and let's get started all right so here I have a simple reactnative project with just a single component inside called map if you check out this map component which is this one here you're going to see it's just an empty component with a text inside now the other thing I added to the project was this image of me which we're going to which I'm going to be using for our custom um marker so I'm going to using this picture of myself so you can use any image one so that's is everything we did for this project going to come back to this uh come to this map component I'm going to add some styles to this uh view so say now style I'll set it to styles. container container and in here we're just going to give you some basic styles for the container so I'm just going to copy these Styles okay so this is like the basic style like the same as the one you have in your default app so that's what I use next thing you need to do is you need to install the library for uh the maps so I'm going to open my terminal open a new terminal by pressing control shift and the til button this this button up there yeah so here I'm just going to now run the command yarn [Music] add and the name of the package the first one you need is a react native um reactnative map directions and reactnative maps so these are the two libraries you are using in this project one is for directions and one is just for ring the map so um in the next video I may also do a video on how to uh use Google directions in in the project in the same project so this may be a two-part Series going to hit enter that's going to start installing the packages for our project now already have this installed in the project already so I'm just going to close this and I exit this and I'll go back to our project let me close this window all right so here the thing the next you need to do is import the maps into our project so just need to come here and say map view and inside the map view now you can pass in us a list of properties here to clearly Define your your map uh an example is um you have the initial [Music] region which is going to be a dictionary here we're going to pass in the default latitude and longitude for our project for for our project to load so I'm just going to remove this here and uh before that let's just create some State the first I need to create is um the initial location so I'm just going to say cons initial location location and I'm going to set it to a dictionary yeah just say the latitude and the longitude to be uh these values here just move this values from here so um so down here we're going to replace the static values with the the initial location values so we can just directly pass in the initial locations and the longitud but I want to create a state because we need to change this dynamically as app Lo so I also I'll still come back up here and I will create a new state so I'll say use State and uh let me zoom in a bit and I'll minimize this terminal all right the first state is just going to be called my location and I'm going to set it to be equal to this initial location so I need to move that down all right so we set the my location to this initial location and down here we just need to remove this value and Set uh set it to my location longitude or latitude and for this one we'll do the same thing so it be my location do latitude sorry long itude rather so this uh latitude Del longitude data refers to how much Zoom you want to have on the app so um I'm just going to use this default one from the documentation so you can change this to whichever value you want based on your the zoom that you want to have like the levels right so I'm just going to save that now and uh that is just going to generate a default map for me to passing the map provider so we need to come down here and passing the provider and here uh there are several types of providers but the one we use for this project is just the Google Maps and up here we need to pass in some styles for the map so just going to say style to be styles. map and inside our style sheet I'll just set the map so because right now the map is displaying but it doesn't have a we and high property so we need to to pass that in so we need to set the width and the height to [Music] 100% okay uh it appears the map is not view displaying so uh we just need to change that to display a different uh display that a different way so I'm just going to come here and I'll set it to Dimension that's the window Dimensions that we're going to get the window withd and display it here and for this other one we're going to do a similar thing so we say Dimension to get the window height and displayed as well so that is going to give this map the WID and height of the screen so as you can see now so uh right now it's is showing San Francisco this is because uh this was that default longitude latitude and longitude so this is um the initial location that is being displayed so um coming back to our map so this is this is like everything we need to do to set up the map so what we need to do now is set up some default um markers for for our for our map before setting uh default markers we need to um first of all make sure that we have access to the users uh um the user has given access to request for their location so I'm going to come here and down here I'm I'm just going to create a use effect H import the use effect and now I'll generate this uh skeleton for the use effect hook and all I'm going to just do here is saying uh get location so get location and we're going to create that function down here so we say cons get [Music] location so since this is requesting a user location we need to make sure it is async so I'm going to come here and I say async and in here uh one other thing we use for uh to request for location is we actually use uh Expo location which I forgot to install so to install that just go back to your terminal and you run yan yan add Expo location this is to get the users location this one is more accurate than using Navigator GE location or that's the by step process so just uh click enter and that's going to install this library for you so uh back here here we're going to wrap everything in a try crash block to make sure the app doesn't crash so I'm going to say try and if there's an error you just catch the error and then you War the user so I'm just going to say console. one the error so inside the try block we're going to now uh request the users's location so we're going to say let uh status so we need to check if the user has given granted that access so that is going to be called status inside um this uh location do get the request location from permission Asing so we need to import this location hook so I'm going to come here and I saying import everything as location from Expo location and that's going to um that's what we're going to call here so down here we're now going to check if the location is granted so you will seeing if the status is granted if the status is granted if not is not granted we're just going to um want the user that the the location has been has not been granted or you can handle this whichever way you want maybe you can uh use that navigator to location or whichever means you want to handle uh the permission denight so um however we're going to now check if or what happens if the permission is not rejected so we're going to say let the location be equal to now we're going to await the location and we're going to get uh the current location current position is in so this it's going to get the user location and after getting the user location you're just going to set set the location so we're just going to say Set uh the my location which is this hook we we created up here this my location H we're just going to set it to the location coordinate we say location it that's going to set um the current location of the user so [Music] um right now here we're going to create our custom markers now so if you hadn't granted permission to your application yet right now you're going to see a popup asking you to allow access to allow your your app to use your location so if you hav't granted location before you model now down here let's just create some default markers for application so uh the first one we need to do is uh we need to come in and set some uh default pin so I just going to create a use State hook now we going to set it to pin and set an permission pin I set it to an empty object and down here we're just going to just set the set PIN to that initial location as well so so uh inside this application now we're going to check if there's a pin location so we're going to say if pin latitude and longitude we're now just going to create a a marker so just going to call it marker directly and here we're just going to render this all right so now we just passing uh the coordinates for the marker which is the pin the lude and longitude we can set thec to let's just call this one default location and down here description which is optional you can set this one or not it is completely optional and when we save that we're going to see a pin on that default location hopefully we imported marker let's see all right marker has been imported all right so I noticed that what we needed to do is we needed to um set this uh uh pin this ini to a string so what I did is uh I created a variable say uh Lo local I just call it anything and you set it to be equal to this exact same uh object so instead of having floating Point numbers I'm going to set them to string so I'm going to set this to string so you can set this location to be any initial location you want maybe your company address or any any location that you want to show by default on the app when they upload so I'm just going to copy this local and instead of setting this to initial location I'm going set it to this variable local here so uh down here we're going to change this thing to not shap in but say first we're going to set the longitude to pass in and let mean just pass this in and then you render it so if we save that now and uh we come back to our map so let's try to zoom out so you how you zoom out on an emulator is you click you press control and you click and then as you're dragging in it's going to zoom out uh let's zoom out bit more I had to change this location for this value to a different value before changing it back for this to display I don't know why that is perhaps if you restart the application it's going to display for you so you can play around this location change it to whichever location you want and that is going to remain there for for fix so now remember we actually did get the users location from here so we set the location so uh down here we're going to create a marker for that as well so we're going to come here and similar to this if I let's just copy let's just duplicate this one up and uh up here for this first one we're going to see if there's my location there's my my location latitude and longitude so for this one we don't need to pass in uh pass it we just need to just call the my location the longitude and latitude and we can remove we can remove this and for this one it is also my location longitude we save that that's going to create a pointer for our current location um a marker for our current location so if I try to zoom out um let me zoom out okay oh for some reason the emulator is telling me that my location is somewhere here so let me change this um title to show the title of the location so Chang it to say uh my current location and we save that I have to check the loog to see if after getting the location is actually the location that's getting that is being cuton so we'll come here and I'm just going to log this location variable so just create location not location course so let's check the logs to see so all right so this is the location and then this is the coordinate uh object it is what we actually um saving inside of this my location variable this object here so this this is everything about the object and then you have this other uh attribute here so um as you can see it is not actually getting my actual location because I am not in the this location I am somewhere else very close to home uh in Africa which is um if you run it on your device on your phone actually it's going to give you an accurate uh location I don't know why that is displaying like that so let's just reload the application and as you can see here while the application is loading I also want to make mention of the fact that this title field here is also very important as you have seen um it is what gets uh shown when you click on the the pin right on this pin here you see it is showing tank Hill and all of this marker so this my location is a title for this location that is going to show on the marker so it's really helpful for Google to recognize uh that location so you might want to uh keep that and however description is not very important because it just describes what what is being carried at that particular location so you can remove it but uh the title is very important the next thing we need to do now is create the buttons to get our actual location so down here under this map we're going to just create a simple view here we'll style it with the style of button container now since we're not trying to create a button we're just going to just create a simple [Music] button that's just going to say the title should be get location and on press we're just going to call focus on [Music] location we're going to create this function up here so back to the top um after get location we're just going to create a function now all right so I'm just going to copy some styles for that custom button and paste it in because we don't have a lot of time to design buttons it says something doesn't exist all right this is supposed to say Styles not what this what is Styles and down here just going to past in the styles for our button and save it so this is the button that is being displayed down here so what all we want to do is we want to go to a particular location when the user clicks on that button so we're going to come back here to the top and up here first thing we do we check if there is a pin latitude and longitude so if we say if pin dot latitude and longitude the next thing we're going to say is [Music] cons region is equal to set it to an object so set it to Latitude um set the latitude to be uh pin sorry pass the pin latitude and we set the longitude as well so we set longitude to a longitude as well and also passing the Deltas so these are like I mentioned before the street the street level the map Zoom rather after setting this uh region we're just going to come down here and we say uh not set my location since we want to animate the map like we don't want it to just move to just uh blink to the other we want it to transition so we come here and we set a ref to to do that so we say if map ref which we're going to create in a minute so let's create that up here I'm going to create a use ref so say map ref isal to react. use ref not create ref so react use ref and now here we're going to check if map ref. current we will set um the map bre to animate to that current location so we're going to set it to animate in one seconds not two seconds one two seconds is very long and uh inside this our map view we're going to replace all of this with the first we're going to in the region I will set it to a state core region which we going to create in a minute and we'll set on region change complete we're just going to set call function to set region state so set region and finally you just need to pass in the ref and set it to map so up here let's create the state for region so I'll come up here and I'll say use state and I'll set the region now we're just going to set the region by default to nor so if we save that and uh I believe that is everything we need for our transition so I click and get location now um I noticed some errors in the code I wrote for instance I spell latitude wrongly it was a la to not latitude so that's why it wasn't animating I to change the location to not the pin location but my own current location so if you click on the button now it is now going to uh animate uh you to your current location so if I zoom if I change my location to some place down and I click on get location it's going to transition to that location so that is uh very very good so um that is how you create your own custom marker that gets your location like I said this is not my location this is something that is generated by the emulator I believe is because this is what I said when I was installing my 2 but um this is not my actual location I am located somewhere in Africa so I don't know why that is like that um right now as you can see this is the location that we're getting now I want to change this marker to show our own custom um marker so what we do is we're just going to comment out this code and down here we're just going to before commenting it let's first of all duplicate it and then comment the old [Music] one now inside here we want to just change this to a custom marker so we call it custom marker and we're going to create this file here so we'll come to our panel and we'll create a file called custom marker. JS I'm just going to copy the code for this file and paste it in because because um this tutorial is getting too long and I'll paste it in here now this our custom Mar just a simple component that be like our normal marker so it Tak in the coordinate uh the title and the image that you want to display so back to our component here I'm just going to remove this description since like I said it's not important and I'll passing the image I'll set the image to require an image from my computer which is the logo that is inside this current directory like I mentioned so it is called dp. PNG uh sorry jpex so this this image that I Al mention which is a picture of me so um that's all we're going to do there so we save that and uh we come here but we're supposed to import it so let's save this one first we save this custom marker and back into our appjs we're going to import it it say import custom marker and that that should resolve that error so as you can see now we are having having a custom marker this thing is uh my internet connection is not really the best so it's taking a little bit longer to load all right so this is our marker that is just very huge and occupying the whole Space so can back to this component let me explain how uh I created it so it is basically the same similar marker as your normal marker instead but here we pass in the coordinate here I placed in my actual location but you can pass in this coordinate file that you're getting from from this object you can just pass in coordinate or latitude and coordinate longitude for your own but since mine is not getting the location so I'm just giving it my actual location which is this coordinate all right so down here you can see we're just passing in a view that is used to wrap the image so we're giving it the sty this is because um the image may be uncontrollable like as you can see here mine is really big really big image so you want to give it this container so that you able to style it and uh be able to control it so this is our image and then for the two tip is just that uh title so this is what is going to show up like like normal title that we have for our normal component so down here I'm going to uncom the Styles here so for the Styles is just the first one is uh the container which just sets the WID and height of the of the container of the container ring the marker to 60 60 and set it to Absolute and give it this custom sty and then now for the image just to be 100% and set the Border R used to be this huge which I don't know why I created it to be that huge so so that is now going to uh render our mark on the screen for some reason it is not being displayed so um let me comment this and down here I'll set the background of blue to it and I'll remove this uh position absolute property to see where it's going to display all right so this is it it is being displayed as a semicircle for some reason uh so let's make this smaller so come up here and I'll set it to 30 by 30 and all right so that is our marker being displayed you can now uh render your image inside so I'm just going to uncomment this image and I should resolve that I'm not sure this border ruse is even important all right so that is showing my location here I am in Cameron actually so uh that is everything you need to know about creating a custom marker for your application see like it has an overflow so we need to hide that so up here we're just going to set an overflow property to Hidden to remove this overflow on the marker so uh let's try to zoom in all right so that is our marker being displayed as you can see there so I get location now nor supposed to come to this location where I'm at but like I said it is showing me a different location so it's going to animate to that other location here somewhere in the US so um that is how you create and animate your custom marker in react native so uh this right here should be displayed back so that we can see how it looks all right now like I said there are other attributes you can pass into this map to make it the functionality more interesting you can also have Google Google direction API to use to get the direction from point A to point B for instance if this is my actual location and I want to go to this uh Library here able to use Google's Direction API to show you the shortest path or the normal path you can use just like how Google Maps work so if you like this video please comment on it and let me know if you want to see another video on the direction API and everything else so uh please like and share and also subscribe to the channel and uh I'll see you in the next one bye

Channel: Rising tide

Views: 859

Keywords: react native, react native google maps, react native maps installation, react native maps, react native maps tutorial, how to use react native maps, react native maps marker, react native maps region, google maps, react native maps callout, react native maps expo, react native maps search location, expo location, map markers, google map direction, google directions, google maps react native android, react native maps get current location, animate map, animate to location

Id: RvEU-5peOrM

Length: 29min 50sec (1790 seconds)

Published: Tue Mar 26 2024