React Native Google Maps | React Native Google Places Autocomplete | Part 5

foreign welcome back with the another video on react native Google Maps so in today's video we are covering a most uh important topic on Google Maps so we are going to cover this react native Google Map places autocomplete so this place is auto complete thing is very very useful when you are building uh like uh any right booking application okay so user will provide the original destination so let's get started you guys so first of all let's head over to the page Repository okay okay so yeah so right now what we have to do first of all let's install this Library so to install this Library we have to run this command inside our project so let's run it okay guys so after that what you have to do is to yeah so make sure that the Google Places API key so you have the API key first of all Google Map API key and the Google Places API is enabled okay on your console so make sure these two things are already done so okay and and also make sure that billing must be enabled because this places API needs a billing so you have to add your card okay so after that what we have to do Google Maps enable Google Map jio coding API you have to enable one more API is called geocoding API if you want Google reverse view coding for current location okay so make sure these two steps are already done okay guys so let's move ahead so right now what we have to do is to use we will use this component so let me first run my project okay okay so guys my project is build simple successfully and uh okay now what I have to do is to copy this code and paste it inside my screen okay so let me paste it over here and let's import this Google Places autocomplete so as you can see that it will take a placeholder and then on press when you press on any address it will give you the details into the data we will see that if we will see that and here in query the most important thing is your API key so you have to pass your API keys let me make a um like config inside config there are okay make it so in here I would like to export Google Maps API okay guys so API key so what I'm doing a export over here so here I'm going to place my AP again you have to place your APK over here okay so I copy pasted my API key we will use our APK over here so Google Maps API key like this and here we are consoling the data so add one more prop over here which is called on feel so on fail will be will give you an error like if your something went wrong with your API or something else you will get the error Dot log there okay if I'm typing anything over here you cannot see anything right now because uh because of the styling so let's do one thing so let's give our map of a z index of zero and let's give this thing of Z index.1 so it will appear on the top of map view and let so let's type anything so you cannot see right now because flags of flags of 0.5 it will take half of the height yeah and if I type anything over here let's type any photo Karachi here as you can see that places API is working okay guys so after that what you have to do is to get the left long from the place like if you search like any place and you click on any of this address so how you can get the lat lock so to get the lat long you have to provide fetch details true and then you have to provide this Json Dot stringify and details dot geometry dot location so if you do that you can get these lat long like I'm getting over here okay and okay so let's get this lat long and move our marker to this lat long so how we can do this so to do this what you have to do here I have a function move to location and it will take a map ref so provide a map ref over here okay so this is will be our map ref and we will provide this ref over here so I will say wrap is equals to map pref and after that Max wrap dot current animate to the alert and longitude okay and this is the duration of animation so what we have to do is to after getting the latitude and longitude what we have to do that call this function okay so let's say like details dot geometry dot location Dot location dot let and see for longitude and the lng.lng for longitudes so what will happen if I save this use ref okay let's import the use ref over here okay so if I search any location so our Google Map will move to this location so this is it guys for today's video I hope you learned something from this video and if you like the video hit the like button subscribe to my channel and I will see you guys in the next one we are going to plot origin and destination and we are going to make a route okay so very good things are coming so be with me and on my next video so if you are new so don't forget to subscribe so I will see you guys in the next one till then take care

Channel: Coding With Zain

Views: 7,251

Keywords: React, React Native, Vscode, TypeScript, Nextjs, Android Studio, XCode, Javascript, Npm, Nodejs, Redux, codewithzain, React Native FlatList, Flutter, React Native Axios, React Native Api, Express, React Native Props, React Native UseEffect, React Native Hooks, React Native Components, React Native Firebase, React Native SignIn with Google, Social Authentication, React Native Web Development, React Native Mobile App Development, React Native Tutorial, react-native-google-places-autocomplete

Id: -ilENWc2kNA

Length: 9min 28sec (568 seconds)

Published: Fri Apr 21 2023