Google Maps and Directions API on React Native

race route text field with address autocomplete markers and much more on google maps that's what we are going to talk about on this video so let's start creating the project by using the command expo init and the project name and here we have to choose the template i strongly recommend to use typescript but it's up to you project created let's get inside the folder and open it on vs code and we will use these three libraries to implement all the features we'll cover in this video so first of all let's set up the google maps let's start with this first documentation here and google maps is very simple all you need to do is use this comment to install the library and its dependencies so i just copy paste and press enter and i'll go back to the documentation and here i use everything from the example i just cop this because it's very simple so i can just copy and paste that's all i'll paste it here and done let's remove this import put all of this import at the top and here i remove things i'm not using like text and status bar and then you have google maps i will start the simulator to see if everything is okay and to open the simulator i just type iron ios or your android if you prefer maps is working but by default we use apple maps on ios and google maps on android but we can set up to use google maps even on ios by doing this so here i'll import the provider to use google and here on map view i will use provider and i just set up that provider there and it's done now you're using google maps on ios and now let's set up the initial position for our map and this is what i need to do so here i get the screen width and height and here i calculate the aspect ratio according to the screen the delta and basically it will setup the zoom and here i have the initial position with latitude longitude and delta and setup this one map view i just do this initial region and here i set up my initial position just save and it's done google maps initial setup is done so let's go to the next step the text field for places autocomplete and we use this library here here in the documentation we have a couple of examples and here's what we need to do is just to add react native google maps places autocomplete just that i don't think it's necessary to use expo to install this but i will use just in case it's necessary for some reason so i will do expo install and the library name let's go back to the documentation to see the example and here's what we need to do so we go here to the map view and below the map view i will paste this code here so i'll just import this one and okay and here we need the google api key and what we need to do is come to console.cloud.google.com and create account if you don't have create project so you just click here and new project after that be sure that you have a billing method active here and not to worry you won't need to pay anything for that all google apis have a high code for free utilization so and after setup inactive some billing method come here to the apis and services and enable apis and services and here basically you need to enable maps sdk for android ios places api and directions api that's all you need after that come here again go to the apis and services and credentials and you create an api key and set up some restrictions for your key to at least prevent someone to use it for anything else so here i have restrictions for the apis i will use and here i have my api key so just be sure to download your key available for everyone okay copy it and we'll use it in the project you can do something like that here i have environments file and here i have a constant for my google api key and pay attention to not commit this api to your repository like github bit bugged or anything else now i'll import my key here using that constant so google api key and i will import it here it's done google api is in place so this component should be working it's not on the screen but it will be soon after we do some styles first of all i will use a view around this component and i will move this component to inside this view and now i will style a couple of things and here i have these two slides i have to implement so i'll do this here and input okay so for the search container i will do this so position i set this one to absolute i will set up the width of the container so with and i use 90 i set up the background and i use white i set up some shadows to make it look better like shadow color i use black shadow offset here i can move the shadow a little bit so i can do width and i'll use two and for height i use two as well it's not like that i just need to remove so it's like this with just one and not two as i was using before and also we have here shadow opacity so i'll set as 0.5 and it comes from zero to one also shadow radius what i use for and this settings here shadow is for ios for android we have another one that is elevation so i use four as well i will set a padding for my content don't be close to the edges i use eight i set a border radius for my container eight as well and here i will set up a border for my input because it won't have a border now we can save here to see and here we can see we have the shadow we have everything set up but my text input don't have a border so it's a little strange let's set up a border here so border color i will use eight i think it's okay and border with one so that's all we need to do here we can see the text input and if i start typing here we already have autocomplete so oops we don't have out complete because this is wrong it's not like that it's just this so let's save it and now we have out completes so autocomplete is working now i set up my box a little better at the top but how do i know the value don't set my box close to the top but below the status bar for example if i do it here top to zero it will be over my status bar like that so that's not what i want i could use a number for example furry but i don't know if this is the best number for all devices and expo provides an api with the correct number for that so what we need to do is to install expo install xbox constants and here we just need to import like import constants from export constants and here we can use constants dot this is wrong it's not like that okay now it's correct so here i have status bar height and just save it to provide the correct stats to bar height so that's perfect and now what i need is another field because i need orange and destination so let's do that but don't keep duplicating the code again and again i can create a component for this for example like this one i just import here i have the import two and okay so what is this here i have the properties i'm using inside the input that is the label that will be at the top of the field and here we have the placeholder i set this as optional and here we have the component and because i said this as an optional field i have to use the full value here and here we have the label at the top of the field here we have our view exactly like our first implementation the only extra things we have here is just fetch the tails that we return the coordinates of the place we select and this is very important for our implementation and here just a callback for our company to be able to handle these details so below here i can just remove this one and instead i'll use input outcomplete here and we need to set up the label origin and the callback on place selected for now i will use an empty function and we also have the destination so i'll just duplicate this one and destination let's save it and we have the necessary fields here for origin and destination and what i'll do now is to save the orange and destination when i select so i'll create a function here named we can use the same name on place selected here we receive the details and the details is like this one google play's details are new but as i use this function for the two fields i will set here a flag to know from which field i'm receiving the details so i'll set here a flag that will be a string but i will only allow this string to be oranging or destination and fine now i will create two states here to save like oranging set origin user state start empty and also destination set destination user state [Music] starting end and here to know which state should set this value i'll do this const set to store my set state function like flag equal to oranging if so i restore set orange otherwise set destination here i recreate my position according to the details i just received so here is set latitude which is details dot geometry dot location dot lot the same here setup at the full value like zero and here we have um longitude longitude that is the same details dot geometry dot location oops dot lng dot lng and the default value now we have the position i will just set this to the state using the set function okay my state is not a string but it's lot lng or new here i just remove this string from here the same for destination and it's done so here is the set so i'm using set orange if the flag is orange otherwise i'll use set destination another thing you do is to move the map camera to the place i just selected so i can do this i create another function like move 2 where i receive the position which is lat lng and here i need to get the camera from the map so first i need a map reference so i'll do this map have that uses use half and the type will be map view start with new and to get the reference i just go back here in the map view and i use half oops have and i just pass here map half okay now i have the map reference and here i'll just use const camera receiving the value from map have dot current dot get camera and here i can see that this function is a promise so i need to use a weight here and also a sink here and okay we get the camera but it can be undefined so we need to check so if camera and here we can move the camera so camera dot center will be the position i just received and then we'll do map f dot current dot animate camera and here i pass the camera and some sightings like duration the time it to take to move from my current position to the position i just selected so i'll use here one second here it's done i just need to use it here like move move to and i'll pass the position that's all and here we can search for some plates like rockefeller center i just select this one and nothing happens because i'm not using the function i just created i just need to cop it and use it here and also here we cannot use like that because the function we need to pass the flag if it's orange or destination so i get here the potatoes and here i'll call the function passing the the tails and the flag oranging the same thing here so that i use the function and i'll pass the tails and the flag destination now it's done so let's try again lock file center i'll click and the map moves to the place i just selected so we don't have any visual reference from the place i just selected so i can use a marker here i go to the map view and now i'll use open and close tags and here inside i just use like marker coordinate and i set the position wants the marker to show up like oranging but i want to but i want to show this marker only if i have the orange in so i'll do this i'll check if orange exists and then i show the marker the same thing for destination so i check here destination and then i use destination here okay that's okay here you see the marker and it's working we can search another place here like seventh avenue click here and okay we have here and we can see that we have the two places here out complete is okay let's trace the route between the two points and for that we use the last library react native maps directions i just click here and here we have the documentation i just need to install react native maps directions i'll cop this one and i install it here using expo not sure if it's necessary but i use it library install now we need to use let's go back to the documentation to see what we need to do and what we need is this component with rng destination it google maps api i'll just copy it go back to my code and here inside the map i just set it here i just import and i use my google api key um here we have a problem because orange and destination cannot be new so we need to check i'll just set the braces here and origin and destination and directions but i want to do one last thing i want to set a button here i want to see the directions when i click the button not when i select the places so i'll do this here after the inputs i'll set a touchable opacity [Music] with a text saying trace route done we just need to style this one and here we already can see the directions but we'll change this a little bit let's set a style for the button so style button and also for the text so style style dot button text okay and here i will set button i set the button background so background color and i use for example um bbb i think it's okay and also i make the bottom a little bigger so i'll set padding vertical to set up a padding at the top and at the bottom i use here 8 for example let's save and you see the button here almost ok let's do it a little bigger like 12. better let's set up a margin from the top so martin top 16 fine let's also set a border ranges border radius four fine and now let's just center the text so button text and i use text align center and it's done our button is completed let's just make sure we trace the route when you click the button so i'll do another state like const show directions start with false and here we show directions if we have if show directions is true and we have orange and we have destination and to set the show direction to true we'll set this here in the bottom so on press and here i just do this set show directions true and okay let's try again two places and now i'll click trace routes and now we see the route let's just make this line a little better by doing this just come here and set up the stroke color here i will use 6x4 and ff i think it's okay let's make this stroke just a little larger by doing a stroke with using four and it's done now i'll implement one last interesting thing so we have the route we have the two points now let's improve it a little bit by setting the two positions automatically to the center of the screen when we trace the route let's create a new function that we'll call trace route here we check if origin and destination are not new or undefined and if so we'll set show directions to true and also we get the map have dot current dot fit to coordinates and here i just pass all the coordinates i want to fit on screen on the center of the screen in this example oranging and destination and here we also can pass a padding so don't make the points too close to the edges so we can do this edge padding and here we can set up this edge padding here as a constant to be more clear so we also we also create another constant for the values we use inside the edge padding so edge padding value i'll use 10 for example and here we need top edge padding value right add pattern value button same thing and left same thing let's use this one here as the key and the value is the same we don't need to do anything else i just save and this function i use set here inside my button on press instead of call instead of set show directions here i just call that function here that function and i save and i click trace route again okay it fit to the screen but it's too close to the edges so let's increase that value to 17 for example i've saved and i click press route again the two positions on the center of the screen yes perfect one last thing we can do is to show distance and duration from origin to destination so we do this here on map view directions we can use unready and we create a function for that so let's call trace route on ready and now we just you just need to create this function and here we receive some arguments so i said here args i'll set as any here i'll just check if the arguments are not new or undefined and inside these arguments i will have two things arcs dot distance and also arts dot duration this is the value you need to save and show on the screen so here i create more two states like distance set distance use the state start from 0 because it's a number and duration start from zero because it's also a number and here you just need to save so set distance and set duration so we have the two values we just need to show this on our screen i will go back here and below the button i will show this information here i can set a new view and inside i can set text distance and here i will fix the value to only two fields after the dot so distance to fix it two the same thing for the duration so here we have duration for duration i'll do something different i just round the number like math dot sale duration and here we have minutes but we will only show this information if you have directions more exactly if you have distance and duration so i'll just check this here like distance and duration if you have distance and duration and if it's bigger than 0 it will show this information here let's say sometimes when you use text we can face this kind of problem what we need to do is just use a different verification like if we have these two things we show the information if not we just show no or nothing i'll save eh okay it's perfect now so let's try again [Music] and trace routes it's perfect so we have here the distance it's like a mile away and we have 80 minutes to go from hogfiler center to the center of 7th avenue so it's done we completed all the features and see you on next video

Channel: Fabio Bergmann

Views: 36,038

Keywords: adicionar google maps no react, coding, google maps, google maps api, google maps api javascript, google maps javascript, google maps javascript api, google maps react, javascript, learn react, programação javascript, programação para iniciantes, react, react google maps, react js, react js tutorial, react tutorial, react tutorial para iniciantes, reactjs, tutorial, react native, react native for beginners, react native tutorial

Id: Wq3dO05jv6o

Length: 28min 39sec (1719 seconds)

Published: Thu Apr 14 2022