Get User Location in React Using HTML and Google Maps APIs 

How is it working for you guys? Chrome denies geolocation permissions on anything other than HTTPS. Its not working for me. Update: Nvm, if you are having the same trouble as me you must click on the button to the left of the url (Not the crosshair one to the right of the url) And it will ask you to allow or disallow permission

. the way you speak really makes me think Steve griffith is your dad

Hey Roelane, good question! I'm simply importing my Google Maps API key since I didn't want it to be public in the video. In the config.js file, I have: export const GOOGLE_API_KEY = ' ' with my key within the quotes. It's best practice to keep the key private and put config.js in the .gitignore file, but you don't need to for testing...you can just put your key directly in the API call instead of ${GOOGLE_API_KEY}. Hopefully that makes sense.

@@tgtech7074 I am happy this is great answer thanks so much

Hey Alexis, sorry it’s not working for you. I’ll create a github repo for you and others to check out and post here when it’s done.

Taylor Griffith Hi! I search this issue and I discover the problem, it’s the permissions, on desktop works on chrome because for default ask the permission but when I tried on mobile don’t allow and the prompt for permission don’t appear... Yo have some ideas to solve this problem?

Sounds like you'll need to troubleshoot your API implementation.

Dev GSoft Good question. I don’t know for sure, but here’s some possible reasons: www.storelocatorwidgets.com/blogpost/20453/Everything_you_ever_wanted_to_know_about_HTML5_Geolocation_Accuracy

I’m sure you can. Take a look at the docs and there may be a parameter or something you can pass into the url string.

@@tgtech7074 please tell me how to get the GOOGLE MAP API KEY??? And tell me what you exactly import

@@tgtech7074 please tell me it's urgent we have to include this in our project...🙏🏻

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-U3dLjHN0UvM.html

That just holds the Google API key. Ideally you’d have a more secure way of accessing the key for the api call.

Please i need an answer @TaylorGriffith

FG -69 thats probably an issue with your api key implementation. Double check that you have the key being passed in correctly

z!shan al! It’s GOOGLE_API_KEY= and then paste your api key. Or remove that and put the key directly in the url for the api call (but that’s more of a security risk if used in production)

Md Nazmul Hossain Check what the api call is returning through a console log or in the network tab in chrome. You’re likely not getting a successful response so it’s undefined.

zishan745 I think that usually means you aren’t doing json.parse() on the result.

Hey Rajat, this is built in React.js. I used Create React App and went from there.

@@tgtech7074 yes it is. I am sorry I don't know why I asked such a stupid question.

rajat butola no problem! :)

Md Nazmul Hossain are you able to look at the network tab in google chrome inspect to see what error the api is giving you?

@@tgtech7074 export const GOOGLE_API_KEY = 'AIzaSyDl5Pq00VGEmLRtY4reOKaRrDEFCkAQOaQ'

Md Nazmul Hossain ok that looks right. Erase that key since it’s public now and generate a new one. Make sure the key is unrestricted for testing. It’s hard for me to say what to fix without knowing what error you’re getting. Are you able to confirm whether you’re getting any data back by console logging the result of the api call (successful or error)? Or checking what the api is returning in the network tab?

@@tgtech7074 thanks dear developer i love you

Enrique Esperilla yep, since making this video I use functional components and hooks entirely.

Did it work for you?