@@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! :)
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
You're welcome, Stephen! If you're interested, here's a video I made with google places and google maps together: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WZcxJGmLbSo.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?
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.
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 .
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
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
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..?
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.
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!
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 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?
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 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
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.?
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.
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.
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
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 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.
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 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 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
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
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) ?
@@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?
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!
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.
