@@leighhalliday I wrote a state and context file the other day without checking for errors until after I was finished. And as expected webloader threw a couple of errors after I was done but none of them were in the code I wrote. I searched for hours until I realized that somehow autocomplete and a bunch of unlucky keystrokes put a import express from 'express' at the beginning of my state file and I never thought of checking the top for errors. I was so disappointed with myself that I called it a day and went to bed :D
I'm quite newbie to javascript and react. Currently I'm working on a project, and this helped me a lot and saved massive time for developing. Really appreciated! :)
On the client side, the return ( ) outputs latitude and longitude. Can you please tell me how to update the latitude and longitude on the server and how to output the current latitude and longitude geodata to the console from the server? I need to use this data in my project.
You're welcome, Stephen! If you're interested, here's a video I made with google places and google maps together: ua-cam.com/video/WZcxJGmLbSo/v-deo.html
Super helpful tutorial! If i had several different fields i.e Street Address, City, State etc how would I be able to parse the autocomplete result to fill those fields?
Hi. Thank you for this video. Very clear and helpful. If you have time can you teach us how to add additional suggestions like the first one inside the suggestion is "use your current location" and follow the API suggestions? I don't know how and have no idea if its possible. Thanks
Thank you for the video. Is it possible to get autocomplete search to show businesses? i.e. McDonald's, City Bank, etc? Or would you recommend using a different api for that
Hey Tigran! Yup, you can... look into the searchOptions prop: github.com/hibiken/react-places-autocomplete#searchoptions And then you can pass in the `types` option to bring back businesses: developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest.types
Honestly that's a problem! You might want to look for free alternatives... unfortunately google wants a Credit Card. Maybe look to get a Visa Debit card if it's available in your country.
Tank you very much. It's possible to use that together with 'react-google-maps'/api ? If it's possible, how can we put only one time the url for both ?
Hy Paolo! I think from using this package which return us the object {lat: x, lng: y} , u can easily proceed to use this lat lng coordinates value to render the location/place to your react-google-maps.
@@hendriagustino7845 I am updating coordinates to googlemap center property but its not getting update, I also tried useRef but no luck, could you help me how to update center and zoom using this tutorial code..?
Hey Leigh I am facing issue while doing this that is REQUEST_DENIED while onchange of the field how do I resolve it I am trying to do in localhost for understanding purpose I created API keys for API geolocation, places, geocoding maps javascript API but still can't resolve it And do I need to enable billing for using localhost too? Please have look on this issue
In order to use geocodeByAddress did you have to enable the Geocode API? The problem is that it's not free. Is there any other way to get the lat and lng of what's searched?
Hey sh2345, I think it's free as long as you don't cross a certain threshold, but you do have to put in your credit card details. I'm not sure... have you found another API that does something similar? Maybe this one? locationiq.com/ or this one? opencagedata.com/api
Hi, I tried to load the API in index.html file within the script tag, provided my google maps javascript API key, and yet I get this ApiNotActivatedMapError error. If you could say why this is happening? My keys are enabled and authorized for this particular project.
Hey Sayan! Off the top of my head I don't know, but googling this StackOverflow comes up which talks about the exact error you seem to be running into: stackoverflow.com/questions/35700182/apinotactivatedmaperror-for-simple-html-page-using-google-places-api Make sure that "Google Maps JavaScript API" is enabled for your key.
Hi, really nice tutorial. I wanted to save the {coordinates.lat} and {coordinates.lng} in a const variable to be passed into a two dimensional array. But I dont now how to I cant seem to store it within the return itself. Any suugestion? thanks!
Hey No Kap... hmm, the truth is that I don't think a library can actually do it, you need some sort of API. Google has one you can use: developers.google.com/maps/documentation/javascript/examples/geocoding-reverse But you could also do a search and see if there are any others.
So the autocomplete function works on my reactjs app but when I select one it does not finish the input field text and throws me an error saying my API does not have access to this. I have geocode, places, maps all enabled. Someone can help me?
Sir Leigh how to use twice the app.js ? like i want to display 2 times ( i can input twice different address ) i try using div root twice but its seems doesn't work can u help me ?
Hey Veaal! Instead of using app.js twice... maybe move the contents of to it's own component, and then include that twice within ... like this: function App() { return (
hey thank you for the video , I did exactly everything as you explained in the video , but I can't get it to work. I'm having the OVER_QUERY _LIMIT issue with a new api key . do you have any insights ?
Hey Turama! Are you using this just for local development or is it on a deployed website? You may need to enter in your credit card details if you're going over the limits.
@@leighhalliday thank you for replying, billing information was set up already but error was till showing. how would you go about making this a component instead of using it directly like in your App class.?
Hello Sir Leigh Halliday, thanks for the great video. I'm wondering on how to run the 'npm start' which is suggested, my API key already inputed but stuck on npm thing which still result blank page in index.
Hey Leigh! Thx for the tutorial. One question. I'm using react-google-maps that you used in your other video, and in that WrappedMap component we put googleMapURL as a prop. In this one, it needs to be as a script. When I do both I get "You have included the Google Maps JavaScript API multiple times on this page". Is there a way to include this google maps url script just once while using both libs ?
Hey Vitor! That's a really good question. As far as I can tell, you can use react-google-maps with an HOC (high order component) called withGoogleMap that looks like it assumes you already have the google maps script installed on your site elsewhere. That might solve your problem! tomchentw.github.io/react-google-maps/#withgooglemap
Thanks for the video it works fine when run locally but when deploy on the firebase it gives me the error of {cors} if you have a solution please reply me i will appreciate it
Having an issue with this one. Cannot get the answer with suggestions from google maps. It doesn’t even show ...loading . API key is attached and it seems like an empty array is coming back to suggestions. Maybe you can help?
I was able to follow until this point. I actually tried initial code from www.npmjs.com/package/react-places-autocomplete and it works. So I don't really get it where is my bug...
Hey Alex! You can limit which "types" the API returns... there is some documentation about that on this page: developers.google.com/places/web-service/autocomplete
It is more easy to understand If you have showed how & from where you have got the script tag which you integrated in index.html & how you generated the map API . Now struggling in getting the script tag if you dont mind please share the above request .
Leigh Halliday thanks Leigh. I did google and found couple. My project is non-profit so I can’t pay for any product. But the project will have users and I don’t want to hang people with unreliable service. How do you go about in this type of situations? Do you simply buy or make your own from scratch (autocomplete search in this case) ?
Thanks, Your videos are amazing, I have implemented and everything is ok except when I click with the input empty because an error is triggered with legend ZERO_RESULTS or INVALID_REQUESTS and I can't catch that problem to avoid that app brearks even if I try with onError attribute, this last option is useful when there are no mathces but if I click enter with empty input the error breaks the app. I hope somebody can guide me with this problem. Thanks.
@@leighhalliday Oh I see, I want to build something like the Yelp address search bar with "Current Location". I was having a hard time finding any tutorial or article related to that. I also google "browser build in geolocation" and see some articles and videos related to React Native, but not for web browsers. If you know any, feel free to refer to me.
@@leighhalliday If you plan to create more tutorial videos that use Google API, can you also include the setup procedure with Google Cloud Platform? I tried to follow your video and had to watch a different tutorial video to do the setup procedure. I was able to get past 06:33 of this video, but then 12:36, I get an error "Geocoding Service: This API project is not authorized to use this API." I couldn't move forward because I don't know what part of the setup is incorrect at the moment. In general, thank you for the tutorial though.
Hi! I have a quick question, What if I want to add the latitude and longitude in array everytime i select a place? Any help would be appreciated! Great tutorial btw! :)
haha never mind i figured it out.:) I have a question though, what if i have 2 autocomplete how can i edit them separately or change their value separately when selecting a place?
Hi Leigh, I'm having some issues. I have the exact same code, however my app doesn't show any "suggestions". It only shows the inputs, lat, and long. Any ideas on what's wrong?
Thank you so much for replying! Turned out it was because VSC cannot process the link to Google API. I honestly don't even know why they have this bug, but I wasn't aware of that, so it took me like 3 hours to figure this out. Anyways, GREAT VIDEO! And, thanks again!
@@deborah-weiss For me, it was the link to Google API that caused the issue. Before my link was split into two lines like in the video. Then, I fixed the issue by making it all connected on one line. For example Before: Link to Google API I fixed it to: Link to Google API
@@leighhalliday To add api key from env file we have to load the script dynamically instead of static right? Also how can we add session token to optimise the cost?
); } } ---------------------------------------------------------------------------------------------------------------------------------------------------------- I have put the state object in the constructor but still got the error then I have took it out of the constructor. So I want to know where I'm going wrong please bother a little to reply me with your fruitful solution.
I have got these errors : You must enable Billing on the Google Cloud Project and error happened when fetching data from Google Maps API. Assist me on this.
Hey Attamjot! You have to enable billing on your google account that you got the google maps api key from... even if you're in a free tier, you have to enter a credit card for it to work.
So no one is talking about how the api_key is exposed for the whole world to see or y'all are not working on live projects where things like api_key is supposed to be confidential?
Hey! I delete the API keys after posting the video. That said, to use google maps on your site, the key must be public, because you'll need to have it in the browser. They key is to restrict its use, tying it to your domain and which services you require.
@@leighhalliday oh really? I'm sorry if I sounded harsh. I was working on a live project so I thought it was safer to hide the apikey and so I searched but didn't see a solution so I got frustrated. But thanks for this information, you are the second person who has told me this and now I have confirmed that I can leave it like that in the index.html...thanks and great video btw!
Man you a life saver.. thanks 4 yrs later
LOL the disappointment when you found the error to be an extra '#' sign. That is real life programming right there! Great vid!
Haha thanks! The sad part is that I usually do this once before actually recording... Still tons of errors even on the second go :D
@@leighhalliday I wrote a state and context file the other day without checking for errors until after I was finished. And as expected webloader threw a couple of errors after I was done but none of them were in the code I wrote. I searched for hours until I realized that somehow autocomplete and a bunch of unlucky keystrokes put a import express from 'express' at the beginning of my state file and I never thought of checking the top for errors. I was so disappointed with myself that I called it a day and went to bed :D
That was dope. This was the most simple and 'get-to-the-point' tutorial I've seen regarding maps. Thanks!
Thanks Moon, glad you enjoyed the video :)
thanks, bro!!!!!
Really helped a lot
It was the OPT explanation for The Problem
Perfect Video for React Integration with Google Places API
Thanks for the vid! I spotted the hash mistake soon as you written it and I was playing pantomime at my screen cheering you on to find it!
Haha... I try to keep the development "real"... mistakes and all.
I'm quite newbie to javascript and react. Currently I'm working on a project, and this helped me a lot and saved massive time for developing. Really appreciated! :)
Sweet, welcome to the JS/React community :) Glad the video was able to help!
Thanks Bro. You saved me. New subscriber from Colombia.
Gracias Cesar! Un saludo desde Canadá! Cuidate mucho porque en este momento la situacion en Colombia esta brava!
@@leighhalliday Que buen Español Hermano. Gracias, aquí seguiremos luchando de la mejor forma posible por conseguir un mejor país.
Respect brotha. Thanks for taking the time to make this easy and painless by removing the pain points for initial setup!
Thanks so much Tim!
Thanks. Helped me integrate the Places Api to my project. Keep posting the great stuff.
Nice!! Happy I could help, Abir. Thanks for saying hi!
Thanks for the vids, man! I just watched the Maps API video of yours and it was really helpful.
Nice, glad you enjoyed it Ivani, thank you!
Amazing community job. It is awesome how you teach and the degree of knowledge you certainly have. Thanks a lot!!!
Muchas gracias Emerson!!
Thanks mate. you just saved my day. Perfect step by step explanation
Nice! Happy to help :)
new sub and bell button smasher here. Your videos are pure gold! Thank you, Mr. Halliday
Excellent! Thanks for watching let_go let's_code!
Thankyou, this was great! short and straight to the point!
Thanks dettieee! Glad you enjoyed it!
Clean teaching skills and you bring rare contents👍✨
Thank you Mehul, glad you enjoyed it!
This library is great! Thank you for the walk through.
Thank you A Xhaferllari! Glad you liked it!
On the client side, the return ( ) outputs latitude and longitude. Can you please tell me how to update the latitude and longitude on the server and how to output the current latitude and longitude geodata to the console from the server? I need to use this data in my project.
Very detailed and straightforward! Thanks!!!
Thank you aanu!! Glad you enjoyed it!
Keep them coming.. I love your videos. 😊
You got it, Anurag :)
How can you load api key in next.js?
hi, it's amazing video, but why I get "...has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header..." error, how can I fix it? please
This is wonderful info!! Thanks Leigh it really helped me out
Thanks Jan! Glad the video was able to help :)
I followed exact same steps but it keeps "...loading". My API key is also correct. I am very worried. plz help me sir
Man, you saved me!!
Woohoo! What are you building?
thank you leigh halliday
You’re very welcome Mohamed!
That's a great help. I was able to implement this feature in my project. Thank you.
Awesome!! Check out this video if you'd like to see how to integrate it into a map: ua-cam.com/video/WZcxJGmLbSo/v-deo.html
very very very nice bro, greetings from medellin, Colombia
Mucho gusto, Edward! Tengo ganas de ir a Medellin... iba a ir este año pero no se pudo por lo de COVID. Ojala en 2021!
Hello. How can I get the city from the results? Please and thank you!
hello, i have a q, i want to display my points first when i search locations , how to add my location to suggestion?
Thanks a lot for the video. Can I restrict suggestions from a specific country?
Thank you for the video! It really helped me out. Liked and subscribed.
You're welcome, Stephen! If you're interested, here's a video I made with google places and google maps together: ua-cam.com/video/WZcxJGmLbSo/v-deo.html
Great work! saved me lots of time!
Nice! Happy to help!
Super helpful tutorial! If i had several different fields i.e Street Address, City, State etc how would I be able to parse the autocomplete result to fill those fields?
Thanks! Any advice on how to use react-select instead of a generic input?
Hi. Thank you for this video. Very clear and helpful. If you have time can you teach us how to add additional suggestions like the first one inside the suggestion is "use your current location" and follow the API suggestions? I don't know how and have no idea if its possible. Thanks
Thank you for the video. Is it possible to get autocomplete search to show businesses? i.e. McDonald's, City Bank, etc? Or would you recommend using a different api for that
Hey Tigran! Yup, you can... look into the searchOptions prop: github.com/hibiken/react-places-autocomplete#searchoptions
And then you can pass in the `types` option to bring back businesses: developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest.types
Hello, i have a error in library , Cannot read property 'onBlur' of undefined when i write in input ?
Sorry percy, I'm not sure!
Awesome! Thanks Leigh :)
Thanks King! Glad you enjoyed it.
Awesome tutorial!
I’m building a road trip react webapp. Where you can manage different road trips. I can use this!
i need enable billing but i have not card, what can i do?
Honestly that's a problem! You might want to look for free alternatives... unfortunately google wants a Credit Card. Maybe look to get a Visa Debit card if it's available in your country.
@@leighhalliday thanks! I used my card, google says they will not take my money until i accept they take it automatically , I hope 🤞 it 😅
Tank you very much. It's possible to use that together with 'react-google-maps'/api ? If it's possible, how can we put only one time the url for both ?
Hey Paolo! I'd probably stick to one or the other, rather than both.
Hy Paolo! I think from using this package which return us the object {lat: x, lng: y} , u can easily proceed to use this lat lng coordinates value to render the location/place to your react-google-maps.
@@hendriagustino7845 I am updating coordinates to googlemap center property but its not getting update, I also tried useRef but no luck, could you help me how to update center and zoom using this tutorial code..?
Hey Leigh I am facing issue while doing this that is REQUEST_DENIED while onchange of the field how do I resolve it I am trying to do in localhost for understanding purpose I created API keys for API geolocation, places, geocoding maps javascript API but still can't resolve it
And do I need to enable billing for using localhost too? Please have look on this issue
Have you enabled both geolocation and places apis?
Can we fetch City, State and zip code from the address?
me ajudou demais , te amo
Great video!!! helped me a lot. Thumbs up!
Excellent! Glad it could help :)
In order to use geocodeByAddress did you have to enable the Geocode API? The problem is that it's not free. Is there any other way to get the lat and lng of what's searched?
Hey sh2345, I think it's free as long as you don't cross a certain threshold, but you do have to put in your credit card details. I'm not sure... have you found another API that does something similar? Maybe this one? locationiq.com/ or this one? opencagedata.com/api
@@leighhalliday Ah I see, I took a look at opencagedata and managed to get the lat and lng. Thanks!
does this library work with react native as well??? seeing how there is no script tag in native?
Thanks for the tutorial. Helped me with my work.
Excellent!! Glad it could help :)
my suggestions array is always empty... can someone guide?
I get error
even when i cloned the repo, it loads forever
Is there a way to limit search to only citys and towns, no exact addresses?
I believe so! Check out the google places options/documentation to see how you can limit search results.
@@leighhalliday thank you. searchOptions
Hi, I tried to load the API in index.html file within the script tag, provided my google maps javascript API key, and yet I get this ApiNotActivatedMapError error. If you could say why this is happening? My keys are enabled and authorized for this particular project.
Hey Sayan! Off the top of my head I don't know, but googling this StackOverflow comes up which talks about the exact error you seem to be running into: stackoverflow.com/questions/35700182/apinotactivatedmaperror-for-simple-html-page-using-google-places-api
Make sure that "Google Maps JavaScript API" is enabled for your key.
@@leighhalliday Thanks! I will check it out, even though I made it sure the api is enabled and activated.
There might be two APIs you have to enable when using places API... I forget :)
you are a life saver!! thank you!! great tutorial!!
:D Glad you enjoyed it!
Hi, really nice tutorial. I wanted to save the {coordinates.lat} and {coordinates.lng} in a const variable to be passed into a two dimensional array. But I dont now how to I cant seem to store it within the return itself. Any suugestion? thanks!
Hey Leah! I think you'd have to do something like this:
const coordsPair = [coordinates.lat, coordinates.lng]
@@leighhalliday Thanks a lot !
Love it!
Thank you for the video :)
Can you tell, please - is there a posibility to recieve more than 5 results?
Hey! Thank you! I am not sure actually! You'd have to check out the docs :D
Amazing tutorial! Thank you very much
Thanks Stephen! Glad you enjoyed it :)
Have you used or suggest any libraries for reverse geocoding? client side
Hey No Kap... hmm, the truth is that I don't think a library can actually do it, you need some sort of API. Google has one you can use: developers.google.com/maps/documentation/javascript/examples/geocoding-reverse But you could also do a search and see if there are any others.
@@leighhalliday you're right, just a simple request. thank dude. You really simplified the autocomplete functionality for us
So the autocomplete function works on my reactjs app but when I select one it does not finish the input field text and throws me an error saying my API does not have access to this. I have geocode, places, maps all enabled. Someone can help me?
Hey Seymur! Make sure that your API key is being added correctly (via environment variable) in the app. Maybe that is the issue?
Sir Leigh how to use twice the app.js ? like i want to display 2 times ( i can input twice different address ) i try using div root twice but its seems doesn't work can u help me ?
Hey Veaal! Instead of using app.js twice... maybe move the contents of to it's own component, and then include that twice within ... like this:
function App() {
return (
);
}
@@leighhalliday thx a lott Sir! have a good day *p.s. : thanks for helping me even i ask a lot hehe
should we pay for API key? because I'm getting an error that tells me to pay for one! I thought it's free :(
You have to enter your credit card but you should be more than fine on the free tier.
Thank you! I have a student account so it turns out to be free for students! That's awesome! thank you for the strait forward tutorial!
hey thank you for the video , I did exactly everything as you explained in the video , but I can't get it to work. I'm having the OVER_QUERY _LIMIT issue with a new api key . do you have any insights ?
Hey Turama! Are you using this just for local development or is it on a deployed website? You may need to enter in your credit card details if you're going over the limits.
@@leighhalliday thank you for replying, billing information was set up already but error was till showing. how would you go about making this a component instead of using it directly like in your App class.?
Does this work with addresses? Like typing 123 main street
Hey Eric! It does indeed.
Hello Sir Leigh Halliday, thanks for the great video. I'm wondering on how to run the 'npm start' which is suggested, my API key already inputed but stuck on npm thing which still result blank page in index.
nvm found it :D keep up the vids!
Nice! Glad you got it figured out Veaal!! :)
Sir Leigh sorry for asking again!, how to combine the index.html custom with the npm ?
Help me , how can i get API key for google places
Start here: console.developers.google.com/
Hey Leigh! Thx for the tutorial. One question. I'm using react-google-maps that you used in your other video, and in that WrappedMap component we put googleMapURL as a prop. In this one, it needs to be as a script. When I do both I get "You have included the Google Maps JavaScript API multiple times on this page". Is there a way to include this google maps url script just once while using both libs ?
Hey Vitor! That's a really good question. As far as I can tell, you can use react-google-maps with an HOC (high order component) called withGoogleMap that looks like it assumes you already have the google maps script installed on your site elsewhere. That might solve your problem! tomchentw.github.io/react-google-maps/#withgooglemap
@@leighhalliday Dude, thanks a lot! I just tried it and it worked perfectly. Thanks! :)
Thanks for the video it works fine when run locally but when deploy on the firebase it gives me the error of {cors} if you have a solution please reply me i will appreciate it
Hey Mohsin! Sorry, I don't have a solution off top of head.
thanks sir
Hey! Great stuff! If you dont mind replying, I keep getting the ...loading when I input something. Would you mind telling me whats wrong?
did you find out the error? i am still struglinf with it
Having an issue with this one. Cannot get the answer with suggestions from google maps. It doesn’t even show ...loading . API key is attached and it seems like an empty array is coming back to suggestions. Maybe you can help?
Hey Martin! It's hard to help without being able to see the code you're working with. Happy to take a look if you'll share.
@@leighhalliday github.com/guitdev86/good-morning/blob/master/app.js
I was able to follow until this point. I actually tried initial code from www.npmjs.com/package/react-places-autocomplete and it works. So I don't really get it where is my bug...
Hey Martin! Unfortunately I don't think this is a public repo so I'm not able to check the code out.
Leigh Halliday didn’t notice it was private. It’s open now.
I tried it, but it says I must enable billing on the Google.
Yup, unfortunately it’s true. You’ll be in the free tier most likely but you must have billing enabled.
tip: For key error add -> key={suggestion.placeId}
Totally, I messed up :D
Google place api is need configure billing account?
Unfortunately, yes... it shouldn't cost you anything though.
Can you please..explain..How to add google review in react js
Hey Preeti! I don't even know what Google Review is :D
Thank you very much for the video!
Thanks for watching, Olha!
Many thanks , bro .
Thank you very much, Trung!
Any ideas how to sort just by airports?
Hey Alex! You can limit which "types" the API returns... there is some documentation about that on this page: developers.google.com/places/web-service/autocomplete
It is more easy to understand If you have showed how & from where you have got the script tag which you integrated in index.html & how you generated the map API .
Now struggling in getting the script tag if you dont mind please share the above request .
Can you please Intergrate the autocomplete in to a map as well
Aseka, it's your lucky day! ua-cam.com/video/WZcxJGmLbSo/v-deo.html
Hi. Is there any alternative to google places? It is not free and i already exceeded my quota
I haven't used any... I know they exist though, I think you'll have to do some googling :D
Leigh Halliday thanks Leigh. I did google and found couple. My project is non-profit so I can’t pay for any product. But the project will have users and I don’t want to hang people with unreliable service. How do you go about in this type of situations? Do you simply buy or make your own from scratch (autocomplete search in this case) ?
Thanks, Your videos are amazing, I have implemented and everything is ok except when I click with the input empty because an error is triggered with legend ZERO_RESULTS or INVALID_REQUESTS and I can't catch that problem to avoid that app brearks even if I try with onError attribute, this last option is useful when there are no mathces but if I click enter with empty input the error breaks the app. I hope somebody can guide me with this problem. Thanks.
How do you add the PlacesAutoComplete to your project?
Check out the installation instructions here: github.com/hibiken/react-places-autocomplete/blob/master/README.md#installation
like from Brazil
Muito obrigado, Marlon!
it looks like I have to Try Google Cloud Platform for free. If I do it, will it charge me anything?
I think you're OK as long as you fall within the "free tier"... you'd have to look up exactly how much usage that allows you.
Hi, is "Current Location" part of the selection of choice?
Unfortunately not, you'd have to add it yourself using the browser's built-in geolocation.
@@leighhalliday Oh I see, I want to build something like the Yelp address search bar with "Current Location". I was having a hard time finding any tutorial or article related to that. I also google "browser build in geolocation" and see some articles and videos related to React Native, but not for web browsers. If you know any, feel free to refer to me.
@@leighhalliday If you plan to create more tutorial videos that use Google API, can you also include the setup procedure with Google Cloud Platform? I tried to follow your video and had to watch a different tutorial video to do the setup procedure. I was able to get past 06:33 of this video, but then 12:36, I get an error "Geocoding Service: This API project is not authorized to use this API." I couldn't move forward because I don't know what part of the setup is incorrect at the moment. In general, thank you for the tutorial though.
Hi! I have a quick question, What if I want to add the latitude and longitude in array everytime i select a place? Any help would be appreciated! Great tutorial btw! :)
Hey Alfon! Create some state called `places`, and when they select a place, push it onto the state. Thank you!!
@@leighhalliday I did try. But everytime i push it into state it get null value always. :(
haha never mind i figured it out.:) I have a question though, what if i have 2 autocomplete how can i edit them separately or change their value separately when selecting a place?
Hi Leigh, I'm having some issues. I have the exact same code, however my app doesn't show any "suggestions". It only shows the inputs, lat, and long. Any ideas on what's wrong?
Hey Novaleigh! Sorry... nothing pops to mind immediately... keep troubleshooting! Use some console.logs and see what data your app has!
Thank you so much for replying! Turned out it was because VSC cannot process the link to Google API. I honestly don't even know why they have this bug, but I wasn't aware of that, so it took me like 3 hours to figure this out. Anyways, GREAT VIDEO! And, thanks again!
@@novaleighbui3860 how did you solve it? I'm working on VSC too and same thing, can't see the suggestions at all...
@@deborah-weiss For me, it was the link to Google API that caused the issue. Before my link was split into two lines like in the video. Then, I fixed the issue by making it all connected on one line.
For example
Before:
Link to
Google API
I fixed it to:
Link to Google API
Hope that helps!
I kind of wanna subscribe again
Do it! I won't stop you!! :D
hey is this using Places API only ? because I am getting an error-- "This API project is not authorized to use this API."
No sorry, it's also using Geolocation API
When I push my codes to Github, am I supposed to remove the Google API key?
Hey Kenndy! Yup, definitely. Don't want to commit that bad boy. Ideally have it in an environment variable.
@@leighhalliday To add api key from env file we have to load the script dynamically instead of static right? Also how can we add session token to optimise the cost?
Nice vdo !
While converting this code into Stateful component getting the below error :-
Error: TypeError: Cannot set properties of undefined (setting ‘prop’)
I have converted your Stateless component into Stateful in below manner :-
import React, { Component } from "react";
import PlacesAutocomplete,{geocodeByAddress} from "react-places-autocomplete";
export default class App extends Component() {
// constructor(props) {
// super(props);
// this.
// }
state = {
address: ""
};
handleChange = (value) => {
this.setState({ address: value });
};
async handleSelect(e) {
const result = await geocodeByAddress(e.target.value);
console.log("Selected Address:- ", result[0].formatted_address);
console.log("Address:- ", result[0]);
}
render() {
return (
{({
getInputProps,
suggestions,
getSuggestionItemProps,
loading
}) => (
Address
{loading ? ...loading : null}
{suggestions.map((suggestion) => {
const style = suggestion.active
? { backgroundColor: "#42a5f5", cursor: "pointer" }
: { backgroundColor: "#ffffff", cursor: "pointer" };
return (
{suggestion.description}
);
})}
)}
);
}
}
----------------------------------------------------------------------------------------------------------------------------------------------------------
I have put the state object in the constructor but still got the error then I have took it out of the constructor.
So I want to know where I'm going wrong please bother a little to reply me with your fruitful solution.
thanks mate
No prob! Glad you enjoyed it, Axle.
@@leighhalliday yeah i am hehe, you got a new subscriber and thanks again
Great job thanks. :)
Thank you, Gustavo!!
nice one
Thank you gbenga!!
Does it work on next js?
It does!
@@leighhalliday Thank you for you help, already done
Thanks
You're welcome, Géraldo!
Thanks pretty
Hehe... and thanks to you for calling me pretty, Smoust.
I have got these errors : You must enable Billing on the Google Cloud Project and error happened when fetching data from Google Maps API. Assist me on this.
Hey Attamjot! You have to enable billing on your google account that you got the google maps api key from... even if you're in a free tier, you have to enter a credit card for it to work.
@@leighhalliday thank you so much .
How to find nearby cities / areas based on city selection of another dropdown ?
So no one is talking about how the api_key is exposed for the whole world to see or y'all are not working on live projects where things like api_key is supposed to be confidential?
Hey! I delete the API keys after posting the video. That said, to use google maps on your site, the key must be public, because you'll need to have it in the browser. They key is to restrict its use, tying it to your domain and which services you require.
@@leighhalliday oh really? I'm sorry if I sounded harsh. I was working on a live project so I thought it was safer to hide the apikey and so I searched but didn't see a solution so I got frustrated. But thanks for this information, you are the second person who has told me this and now I have confirmed that I can leave it like that in the index.html...thanks and great video btw!