How to use Google Maps API with React including Directions and Places autocomplete

Подписаться 44 тыс.

Просмотров 176 тыс.

50% 1

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: ru-vid.com...
--------------------------------------------------------------------------
💵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

Опубликовано:

13 мар 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 169

@oxanasf6369 2 года назад

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.

@jeanbracco4941 Год назад

Ppoiiy5

@gagandangwal4920 6 месяцев назад

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.

@azeridevelopswebsites Год назад

Best video on React google maps api I've watched. Perfectly explained! Thank you

@TacticalTerra 2 года назад

Amazing video every was explained in a very simple manner. Great job buddy

@allie4841 Год назад

This was the best tutorial I've used for the GoogleMapsAPI! Thank you so much for this video :D

@mafiacodes Год назад

You're very welcome!

@Frodonar 5 месяцев назад

Did you had to pay at some point or it's just credit card for auth?

@juanddjaramillo 2 года назад

what a useful video! thanks mate

@webverse8564 4 месяца назад

Best tutorial as of now that I have gone through of Google maps API Amazing

@CarlosFalguera Год назад

You're awesome! Great tutorial!

@ilerioluwakiiye 6 месяцев назад

Lovely video! Thank you!

@winarus3574 Год назад

Hi ! Very useful content. Thank you so much!

@raphaelmartinez9189 Год назад

Thanks a lot !! Very good this explication.

@kdb2611 Год назад

Thanks for the video it really helped me!😁

@ivanjuarez4920 2 года назад

Thanks a lot dude!

@abhishekchaurasia_ Год назад

very useful it helps me a lot thanks making this tutorial

@imranbarry800 Год назад

Awsome work there

@switch-247 13 дней назад

thanks this helped alot.

@reginacheong4596 Год назад

Thank you for this tutorial and the effort into making this.

@mafiacodes Год назад

You're very welcome!

@halmrk4822 2 года назад

This tutorial is awesome

@bluex217 Год назад

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

@JustinSias-fu4mx 2 месяца назад

Thank you!

@muneess2979 2 года назад

Va thala.. Va thala... Waiting for you ❤

@ahmaat19 2 года назад

Thank you.

@sinthujanbalachandran6686 Год назад

thank you very much for this tutorial

@mafiacodes Год назад

You are welcome!

@zihadprogrammer4246 2 года назад

Thank you

@abhinandankhilari9729 2 года назад

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?

@joewatson8357 Год назад

The tutorial video is accommodating man but can we set it to libraries for a specific country or for local ?

@ghostjavascript7072 11 месяцев назад

hi thanks for your tuto, there is any way for using numbers instead of letters in the directions marker not the normal marker ?

@ogunsusitemitayo4567 2 года назад

Thanks a lot for this tutorial, What font are you using for your editor by the way?

@usmanmustapha6149 Год назад

it looks like a default font but i think you can change it from the index.js

@pursottamsah6430 Год назад

Thanks Man lots of love

@azghinabdelkarim7260 2 месяца назад

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

@manoj-k 2 года назад

🔥🔥🔥

@eazhar Год назад

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%

@amyc3713 Год назад

I LOVE YOU!!!!

@pethurt Год назад

Me too!!!

@pethurt Год назад

Oh! 100vw and 100vh worked for me as well!

@WhatEver-th8hl 2 года назад

What do u mean different api key, or Which one . I am facing same issue "for development purpose only"

@ysteinellingsen6168 Год назад

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? :-)

@ssshwanth 2 года назад

Bro good tutorial But why it doesnt show the full address while we typing address

@annashmuhendra6907 2 года назад

good man, but i want to ask, does this have activate billing account?

@tobibakz387 8 месяцев назад

Nice Tutorial. please how do I get the lat and lon of each value of autocomplete input value

@user-pq3gd1ls7y Год назад

地址联想列表中多个地址是如何排序的呢？是按地址从近到远自动排的吗？

@angelramos691 Год назад

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...

@kenanmckenzie Год назад

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

@layolay6107 2 года назад

Please Truly, what are your extensions? Thank you sir

@ThatsJustDaniel 7 месяцев назад

can you include google traffic colors along the directions layer ??

@fatihkaanyildirim4291 Год назад

How do i calculate the duration depending on the traffic?

@tyongalves7129 Год назад

came here jus for the source code on github thanks

@addysam5692 2 года назад

hi sir, can u made this auto complete and direction in android as well.. there is no useful tutorial on latest google maps api

@1MinuteShortVideos 4 месяца назад

Can you create a tutorial on smooth running on react with Google map

@setshow9135 15 дней назад

Can i create this project using regular elements such div, section instead of using all the components you imported from @chakra- ui/react?

@hawrasaif8664 Год назад

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 Год назад

The poly line is to display directions, if you drag it we are still having the same original directions

@hamzaee2680 Год назад

@@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.

@mohdanas8027 2 года назад

sir we want to calculate the polygon area using react js

@sanjayn5355 5 месяцев назад

sir, could you post live tracting ?

@salarsk9060 7 месяцев назад

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

@kadirramazn Год назад

How can i make panTo to the autocomplete chosen option from the input without have to click a button?

@mdintezaralam528 Год назад

❤

@tech4tomorrow Год назад

This page can't load Google Maps correctly. Do you own this website? I AM GETTING THIS ERROR PLZ HELP ME

@kunallade589 2 года назад

Can I use your api key does it will work because my billing account is not working and it's not creating to

@gurureddy1861 Год назад

Scrolling through the route is not possible, can you help me out on how to add scrolling feature through route

@andrewaghoghovwia1948 Год назад

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

@nikitadeshmukh4255 Год назад

Same issue, did you get any solution?

@andrewaghoghovwia1948 Год назад

@@nikitadeshmukh4255 naaaa

@benjimilan1186 Год назад

@@nikitadeshmukh4255 You can use a free trial for $300 of api calls

@siyandamakhalima6425 2 года назад

Saved ma ass!!!

@atnguyenucchi9776 Год назад

very helpfull, but if i use map "For Development purpose only", can i using direct and places similar in your video ?

@mafiacodes Год назад

I m not sure since billing should be enabled but you won’t be charged until you exceed free tier

@orioldemo5380 Год назад

how to colour states of a country using this library ?

@muhammadshahid444 8 месяцев назад

is it payed service to use google cloud map?...in mine case it is not working properly

@Muhammad-kh9lu Год назад

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

@conficiusadda7794 10 месяцев назад

I have the same issue please have you found a solution

@majdkalthoum6113 Год назад

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?

@sathishs3582 Год назад

Auto complete is not working , it throws "BillingNotEnabledMapError" , is billing account required to use auto complete for testing?

@dilipsahu989 Год назад

you are using Cascadian code font-family but in my case, the words are not coming in the italic version.

@mafiacodes Год назад

I am using operator mono

@tonofalco12 Год назад

How could I implement waypoints with directions?

@vivekyes 11 месяцев назад

Hi, How to restrict the auto suggest to display only cities? and also is there a documentation page for this maps api?

@gagandangwal4920 6 месяцев назад

there is one which is very badly maintained

@jonasbalsys3696 2 года назад

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?

@daneogden3554 Год назад

I am having the same problem. Did you ever find a solution or a cause?

@daneogden3554 Год назад

Seems to be working using

@nvmate4584 Год назад

@@daneogden3554 ty dude

@satyasamant9828 7 месяцев назад

Google maps api asking for billing process then how u activate Google maps api service with free

@codingsingh4156 Год назад

r u in france now?

@vanquangpham3309 Год назад

Cook!!

@gagandangwal4920 6 месяцев назад

CAN YOU TELL ME How to convert origin ref to lat and lng?

@LearnITify 9 месяцев назад

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"

@karmendurbin Год назад

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...

@vslraw4202 7 месяцев назад

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

@FreeSkypeGenerator1 Год назад

do we need to attach our credit card for billing in google?

@mafiacodes Год назад

yes

@karamathussain6832 8 месяцев назад

Autocomplete function is not working and can you please explain how you ignored error showing in google

@Toulkun Год назад

For some reason it doesnt show on the phone, any ideas?

@donaldtrump1902 2 года назад

I m getting error as Reference error :Google is not defined

@anjalikukreti6603 2 года назад

I am also getting the same error, did you resolve it?

@Prośny_m Год назад

{isLoaded && }

@silentjoker6512 Год назад

me too, did you resolve it?

@ankit_iitr Год назад

same error how to solve

@rishirahul. Год назад

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 })

@devdariill 10 месяцев назад

13:00 options disable 25:00 directions conf

@WhatEver-th8hl 2 года назад

I am facing some error like "this page can't load Google Maps correctly"

@vidushi4980 Год назад

have u find any solution to that.. facing same

@saurabh9446 2 года назад

We need credit card for this APIs right?

@darkknocker Год назад

what is your vscode font and theme?

@mafiacodes Год назад

Operator mono and snazzy operator

@abhijithc5221 2 года назад

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 .....

@abhijithc5221 2 года назад

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....

@benjimilan1186 Год назад

@@abhijithc5221 Hello sir, did you manage to fix this problem? I have been trying for so long and I cant get it to work

@narasimhapalla5173 Год назад

@@benjimilan1186 I also facing this issue. Did u get it?

@udayignet6119 7 месяцев назад

is google map api free or paid to develop app like Ola, Zamato?

@sdevaleem2530 Год назад

how can we change the route default icon ?

@mafiacodes Год назад

You can’t do much about that, else get directions and draw connected polylines with ur own markers

@hamzapaskingakhtar 9 месяцев назад

Autocomplete starts at @18

@AbiRamABII Год назад

sir they asking to pay to enable that API any solutions.?

@mafiacodes Год назад

yeah, you can sign up, but they provide a generous free tier even after that

@thisisme645 Год назад

Hello is posible to update the route ? between original and distnation ?

@mafiacodes Год назад

Yes for sure

@thisisme645 Год назад

@@mafiacodes like we draw a route by adding position ? how it work !

@mafiacodes Год назад

Yes we need to update location for new directions

@thisisme645 Год назад

@@mafiacodes do you have a video doing that ? also " origin " being selected ?

@mafiacodes Год назад

I don’t but you can programmatically do that easily

@hamzapaskingakhtar 9 месяцев назад

Options not working for me. Still zooming

@hamzapaskingakhtar 9 месяцев назад

Just do this instead

@ekimcemulger8101 2 года назад

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}

@mafiacodes 2 года назад

Using the LatLng object literal

@ekimcemulger8101 2 года назад

@@mafiacodes thank you so much, for more info: var longLat = new google.maps.LatLng(x1,y1)

@gagandangwal4920 6 месяцев назад

@@mafiacodes CAN YOU TELL ME How to convert origin ref to lat and lng?

@mafiacodes 6 месяцев назад

Check the value of origin.ref.current.value its present there (lat lng)

@shebinshamsuddeen1948 5 месяцев назад

Is google maps api free .

@NoumanKhan-ck7vx Год назад

please share you api key so we can also render its not free

@PlayerOfCode Год назад

These apis are free or paid

@mafiacodes Год назад

paid

@gaiusalfred Год назад

whats the map script and where should we add map script ?

@mafiacodes Год назад

Watch around 7:00 , there you can see how the script is loaded

@gaiusalfred Год назад

@@mafiacodes ... yeah.. i got it... thank you sooo much

@someonesomewhereorsomething 11 месяцев назад

if you are using the react version > 18 will not work. will work

@Corei7100 9 месяцев назад

Thanks for the info bro. I was facing issue with it.

@someonesomewhereorsomething 11 месяцев назад

My marker is not working how to fix??????????????????????????

@someonesomewhereorsomething 11 месяцев назад

I got it just use instead of

@NoumanKhan-ck7vx Год назад

This page can't load Google Maps correctly.

@Shafeeque___7 8 месяцев назад

is the api is paid or still free??

@u.m.h3688 Год назад

how i use free google api?

@davidchavarriamendez9091 Год назад

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)