How to use Google Maps API with React including Directions and Places autocomplete
Вставка
- Опубліковано 13 бер 2022
- In this video we will learn how to use the #Google #maps inside a #React application, we will also see how to use the Places autocomplete API and using the origin and destination address we will get the directions and display them on the googlemap, we will also see how to get the total duration and distance of the route.
--------------------------------------------------------------------------
📦FREE $100 credit @Digital Ocean: m.do.co/c/3208f08b3324
--------------------------------------------------------------------------
Subscribe: ua-cam.com/users/yourstruly2...
--------------------------------------------------------------------------
💵Support the channel:
Paypal: www.paypal.me/trulymittal
Patreon: / trulymittal
--------------------------------------------------------------------------
www.npmjs.com/package/@react-...
github.com/trulymittal/google...
======================
✔ Other useful Playlists
======================
#RestAPI (#NodeJS and MongoDB): • REST API using NodeJS ...
#API Authentication using #JWT: • NodeJS API Authenticat...
#Firebase: • Firebase | Build a Not...
Docker: • Docker
MongoDB: • Learn MongoDB in 50 mi...
Html/Css/Js: • HTML / CSS / JS
Android: • Android
Challenges: • Challenges
#yoursTRULY #tutorial #howto #nodejs #android
I wanted to thank you for this amazing tutorial. It absolutely matched what I expect from a tutorial. It helped me a lot in my project even though I only needed first part of the material you provided. It was very well organized and very clear.
Ppoiiy5
I want to thank so but i dont have to write a long comment, however i found a goodlooking comment below so i copy pasted it. Hope youre welcome.
I wanted to thank you for this amazing tutorial. It absolutely matched what I expect from a tutorial. It helped me a lot in my project even though I only needed first part of the material you provided. It was very well organized and very clear.
Best video on React google maps api I've watched. Perfectly explained! Thank you
This was the best tutorial I've used for the GoogleMapsAPI! Thank you so much for this video :D
You're very welcome!
Did you had to pay at some point or it's just credit card for auth?
Amazing video every was explained in a very simple manner. Great job buddy
what a useful video! thanks mate
Best tutorial as of now that I have gone through of Google maps API Amazing
Hi ! Very useful content. Thank you so much!
Awsome work there
This tutorial is awesome
Lovely video! Thank you!
You're awesome! Great tutorial!
Thanks a lot !! Very good this explication.
Thanks for the video it really helped me!😁
very useful it helps me a lot thanks making this tutorial
Thank you for this tutorial and the effort into making this.
You're very welcome!
Thanks a lot dude!
thanks this helped alot.
Va thala.. Va thala... Waiting for you ❤
Thank you.
thank you very much for this tutorial
You are welcome!
Thank you!
Thank you
🔥🔥🔥
Hey my friend! Would you have any direction to take this just 1 step further by programmatically rendering the coordinates for the routes whenever a route is selected?
With this, for 1 of my portfolio projects I'd then be able to update the positions in realtime to simulate a moving object
Thanks a lot for this tutorial, What font are you using for your editor by the way?
it looks like a default font but i think you can change it from the index.js
hey i hope you're doing well
i really loved the tutorial so amazing
i have a question how to set a language and a region using react ??
i hope you understand what i'm asking
and i hope you answer :33
The tutorial video is accommodating man but can we set it to libraries for a specific country or for local ?
Let's say there is a form with discrete fields like Street, City, State, and Country.
How to populate respective values from the Google Maps suggestion list on address selection into these discrete fields?
hi thanks for your tuto, there is any way for using numbers instead of letters in the directions marker not the normal marker ?
Bro good tutorial
But why it doesnt show the full address while we typing address
If anyone is having an issue with the initial map not showing [i.e. blank screen after loading], try changing the mapContainerStyle property to 100px instead of 100%
I LOVE YOU!!!!
Me too!!!
Oh! 100vw and 100vh worked for me as well!
good man, but i want to ask, does this have activate billing account?
❤
What do u mean different api key, or Which one .
I am facing same issue "for development purpose only"
Thanks Man lots of love
Hey,
having an issue where the marker wont show on the map.
on the react components it even gets the position prop, so it should be working?
please halp? :-)
地址联想列表中多个地址是如何排序的呢？是按地址从近到远自动排的吗？
Nice Tutorial.
please how do I get the lat and lon of each value of autocomplete input value
Thanks for the great content but I think you should have continued with the free api key so that we are all on the same page. Yours displays beautifully and mine is yelling at me, FOR DEVELOPMENT PURPOSES ONLY
Same issue, did you get any solution?
@@nikitadeshmukh4255 naaaa
@@nikitadeshmukh4255 You can use a free trial for $300 of api calls
came here jus for the source code on github thanks
Great Video!
So, I have a question, how can I load an origin value from my local data?
I've been trying, but when I select a location it does not change... always I see the same location that I had provided from begin...
js has a navigator function built in where you can get your current location navigator.geolocation.getCurrentPosition and define your lon and lat as variables equaling position.coords.latitude/longitude
Please Truly, what are your extensions? Thank you sir
Can you create a tutorial on smooth running on react with Google map
Hey,
There is a small bug in the code. If you set draggable:true in polylineoptions then The DirectionsResponse object does not get updated when the route is dragged
The poly line is to display directions, if you drag it we are still having the same original directions
@@mafiacodes Thank you for great video. I have a question.
If we set draggable true like following ,
how can we update distance and durations? And how can we get waypoints? There is getDirections function on google api but i could not find a way to use it when using DirectionsRenderer as a component.
sir, could you post live tracting ?
How do i calculate the duration depending on the traffic?
Saved ma ass!!!
hi sir, can u made this auto complete and direction in android as well.. there is no useful tutorial on latest google maps api
Google maps api asking for billing process then how u activate Google maps api service with free
can you include google traffic colors along the directions layer ??
Cook!!
sir we want to calculate the polygon area using react js
How can i make panTo to the autocomplete chosen option from the input without have to click a button?
Can I use your api key does it will work because my billing account is not working and it's not creating to
for me, does not show on first render, but if u add more markers and it rerenders Markers on loaded map Markers appear, how to fix it?
I am having the same problem. Did you ever find a solution or a cause?
Seems to be working using
@@daneogden3554 ty dude
how to colour states of a country using this library ?
Scrolling through the route is not possible, can you help me out on how to add scrolling feature through route
I have billing enabled on google cloud but my map still shows "For development Purpose Only" Any idea why it is behaving weird? My API key is also valid and I have followed all your instructions. Thanks
I have the same issue please have you found a solution
I can't get the value of the input when choosing from the dropdown.
The useref only get what i typed in.
Does anyone have a solution?
The problem about API and you did not explain how to handle it, I do not understand other people why think this video is "amazing"
very helpfull, but if i use map "For Development purpose only", can i using direct and places similar in your video ?
I m not sure since billing should be enabled but you won’t be charged until you exceed free tier
Can i create this project using regular elements such div, section instead of using all the components you imported from @chakra- ui/react?
everything is ok and compiled successfully but it runs with runtime errors and not able to rectify that issue .please give any suggestion to rectify the code
you are using Cascadian code font-family but in my case, the words are not coming in the italic version.
I am using operator mono
This page can't load Google Maps correctly.
Do you own this website?
I AM GETTING THIS ERROR PLZ HELP ME
How could I implement waypoints with directions?
I m getting error as Reference error :Google is not defined
I am also getting the same error, did you resolve it?
{isLoaded && }
me too, did you resolve it?
same error how to solve
Enter this (// eslint-disable-next-line no-undef) line of code above wherever you use google.maps.xxxxx (Totally in 2 places)
How the code should be 👇
// eslint-disable-next-line no-undef
const directionsService = new google.maps.DirectionsService();
const results = await directionsService.route({
origin: originRef.current.value,
destination: destinationRef.current.value,
// eslint-disable-next-line no-undef
travelMode: google.maps.TravelMode.DRIVING
})
is it payed service to use google cloud map?...in mine case it is not working properly
Hi, How to restrict the auto suggest to display only cities? and also is there a documentation page for this maps api?
there is one which is very badly maintained
Auto complete is not working , it throws "BillingNotEnabledMapError" , is billing account required to use auto complete for testing?
r u in france now?
bro this code is not working in react 18 version
plz ,
Add a new videos to set direction in google map in react 18 version .....
const DirectionsRenderer = new window.google.maps.DirectionsRequest
this code doesn't work in react 18 version. This code is add in the google map , The map was disapper .
that time the error was constructure is not define....
@@abhijithc5221 Hello sir, did you manage to fix this problem? I have been trying for so long and I cant get it to work
@@benjimilan1186 I also facing this issue. Did u get it?
CAN YOU TELL ME How to convert origin ref to lat and lng?
do we need to attach our credit card for billing in google?
yes
I am facing some error like "this page can't load Google Maps correctly"
have u find any solution to that.. facing same
I came here to figure out how to enable billing for Google Maps for my API. My application is working but the Maps API won't enable due to the billing being turned off. I have enabled it several times but it still says disabled. Google really needs to fix this...
For some reason it doesnt show on the phone, any ideas?
Autocomplete function is not working and can you please explain how you ignored error showing in google
what is your vscode font and theme?
Operator mono and snazzy operator
how can we change the route default icon ?
You can’t do much about that, else get directions and draw connected polylines with ur own markers
13:00 options disable
25:00 directions conf
I am a student and is there any method by which I can use it for free ? or like at a cheaper rate ? I can affort 10 or 20 $ max but 300 is quite a lot
sir they asking to pay to enable that API any solutions.?
yeah, you can sign up, but they provide a generous free tier even after that
We need credit card for this APIs right?
Options not working for me. Still zooming
Just do this instead
if you are using the react version > 18 will not work. will work
Thanks for the info bro. I was facing issue with it.
whats the map script and where should we add map script ?
Watch around 7:00 , there you can see how the script is loaded
@@mafiacodes ... yeah.. i got it... thank you sooo much
Hello
is posible to update the route ? between original and distnation ?
Yes for sure
@@mafiacodes like we draw a route by adding position ?
how it work !
Yes we need to update location for new directions
@@mafiacodes do you have a video doing that ?
also " origin " being selected ?
I don’t but you can programmatically do that easily
My marker is not working how to fix??????????????????????????
I got it just use instead of
Autocomplete starts at @18
These apis are free or paid
paid
Is google maps api free .
is google map api free or paid to develop app like Ola, Zamato?
Instead of taking value from input element, how can we set origin or destination values in terms of longitude and latitude ?
NOT: origin: originRef.current.value
But : origin: {lat:15.151515 , lng:15.151515}
Using the LatLng object literal
@@mafiacodes thank you so much, for more info:
var longLat = new google.maps.LatLng(x1,y1)
@@mafiacodes CAN YOU TELL ME How to convert origin ref to lat and lng?
Check the value of origin.ref.current.value its present there (lat lng)
please share you api key so we can also render its not free
This page can't load Google Maps correctly.
bro google api`s gives paid services
how i use free google api?
There's no way. Better to go for other alternatives like mapbox (gives you 100 000 free monthly directions) or open street map (gives you 7000 per day)
it's free brother unless your app has massive traffic
Hello Everyone, I need google map api key. Anyone is here who can help me?
google map api is free, but you need to sign up with your credit card. they dont charge you unless you intentionally sign up
@@benzz22126 Hey... Can you explain whether it's free or not.... I am not able tp understand how this works?
@@shruthimohan8438 its free...but you have to provide your credit card because thats their way of verifying youre a human
@@benzz22126 So, once I'll provide my credit card details, will the money will be deducted?
@@benzz22126 please give clarification