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.
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.
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%
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
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
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 })
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
@@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.
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
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....
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
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
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?
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...
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
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}
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)
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.
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?
Best video on React google maps api I've watched. Perfectly explained! Thank you
Best tutorial as of now that I have gone through of Google maps API Amazing
What do u mean different api key, or Which one .
I am facing same issue "for development purpose only"
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!
Amazing video every was explained in a very simple manner. Great job buddy
good man, but i want to ask, does this have activate billing account?
Lovely video! Thank you!
Thanks for the video it really helped me!😁
You're awesome! Great tutorial!
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
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 Man lots of love
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
This page can't load Google Maps correctly.
Do you own this website?
I AM GETTING THIS ERROR PLZ HELP ME
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
what a useful video! thanks mate
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
})
Hi ! Very useful content. Thank you so much!
is it payed service to use google cloud map?...in mine case it is not working properly
Can i create this project using regular elements such div, section instead of using all the components you imported from @chakra- ui/react?
How can i make panTo to the autocomplete chosen option from the input without have to click a button?
Scrolling through the route is not possible, can you help me out on how to add scrolling feature through route
hi thanks for your tuto, there is any way for using numbers instead of letters in the directions marker not the normal marker ?
地址联想列表中多个地址是如何排序的呢？是按地址从近到远自动排的吗？
The google cloud console is asking for payment before providing me options to create new project. What should i do..Can we use it for free ?
I'm having same issue do you have any free api to so same?
Thanks a lot !! Very good this explication.
Auto complete is not working , it throws "BillingNotEnabledMapError" , is billing account required to use auto complete for testing?
Awsome work there
thank you very much for this tutorial
You are welcome!
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
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?
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.
CAN YOU TELL ME How to convert origin ref to lat and lng?
i really thanks to you , thank you so much brother
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
How could I implement waypoints with directions?
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
13:00 options disable
25:00 directions conf
Va thala.. Va thala... Waiting for you ❤
can you include google traffic colors along the directions layer ??
Autocomplete function is not working and can you please explain how you ignored error showing in google
how to colour states of a country using this library ?
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
I am facing some error like "this page can't load Google Maps correctly"
have u find any solution to that.. facing same
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
Please Truly, what are your extensions? Thank you sir
Can I use your api key does it will work because my billing account is not working and it's not creating to
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?
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
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
Nice Tutorial.
please how do I get the lat and lon of each value of autocomplete input value
This tutorial is awesome
How do i calculate the duration depending on the traffic?
Thanks a lot dude!
For some reason it doesnt show on the phone, any ideas?
thanks this helped alot.
what is your vscode font and theme?
Operator mono and snazzy operator
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?
The tutorial video is accommodating man but can we set it to libraries for a specific country or for local ?
Thank you!
Google maps api asking for billing process then how u activate Google maps api service with free
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
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
My marker is not working how to fix??????????????????????????
I got it just use instead of
can I bye this one?
sir, could you post live tracting ?
sir we want to calculate the polygon area using react js
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
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...
Can you create a tutorial on smooth running on react with Google map
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
Bro good tutorial
But why it doesnt show the full address while we typing address
hi sir, can u made this auto complete and direction in android as well.. there is no useful tutorial on latest google maps api
Thank you.
r u in france now?
Options not working for me. Still zooming
Just do this instead
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
We need credit card for this APIs right?
if you are using the react version > 18 will not work. will work
Thanks for the info bro. I was facing issue with it.
came here jus for the source code on github thanks
Thank you
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
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)
is google map api free or paid to develop app like Ola, Zamato?
🔥🔥🔥
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"
This page can't load Google Maps correctly.
Is google maps api free .
These apis are free or paid
paid
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
Autocomplete starts at @18
❤
Cook!!
please share you api key so we can also render its not free
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
Saved ma ass!!!