Google Geocode API & JavaScript Tutorial
ฝัง
- เผยแพร่เมื่อ 25 ก.ย. 2024
- In this video we will be working with the Google geocoding API to get all location info including latitude and longitude from an address or even from just the name of a city or state. We will build an application with a Bootstrap 4 form to interact with the API.
CODE: Code for this video
www.traversymed...
Google Map API Tutorial:
• Google Maps JavaScript...
SPONSORS:
DevMountain Bootcamp - goo.gl/6q0dEa
SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
www.paypal.me/t...
/ traversymedia
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ bradtraversy
![[Full Episode] The Restaurant War Thailand ศึกพ่อค้าซ่าแม่ค้าแซ่บ Episode 1 | 22 ก.ย. 67](http://i.ytimg.com/vi/BuzQ70v-UZQ/mqdefault.jpg)
Brad, you rock. Please continue to do these Google API videos! They are *so* helpful and really motivate me to continue my coding journey! I spent a few hours on your first Google API video and am in love with the possibilities! Thank you so much for your great material.
Most straight forward API tutorial I've seen yet. Somebody buy this dude a beer!
Hey man, I am in Dourchester and I just wanted to thank you. This was the most difficult thing that I was working on. The databasing was 10x was easier than the Google tutorials. Thank you again
Brad, I completed your yesterday and completed this related video today ... as always, I’d appreciated your high quality video and keep me motivated to continue to learn. Thank you!
Realy helpfull...
Am a Junior Node Devoloper From India...
This helped me a lot...
Thank You...
Keep The The Things Going...
All The Best...
Dude, you explain things in such an easy to understand way I'm subscribing and looking forward to future videos.
This is tremendous. I have watched a lot of tutorials lately and you're excellent. For one thing, you don't do corn-ball humor like all those online schools. You also present it well for novice coders. More please.
As someone with little experience working with APIs, this was a great tutorial. Answered a lot of questions I had :)
Awesome tutorial Brad. I can't express my gratitude in words. keep doing the good work. Thanks!!
Half way in. Great vid so far!
If I may humbly suggest a tutorial I'd love to see something on Vue/Wordpress API. Just something simple like getting the project setup and pulling in posts and featured images would be awesome.
Something for your viewers to consider is that the API Key must be unrestricted. I discovered under the returned object the following statement: Browser API key cannot have referrer restrictions when used with this API. Note: Your videos are well produced and explained.
Thank you, Brad. Always wanted to Learn How to Work with Google Maps. This Helped a Lot, i dont need anything else to learn it, but your Tutorials only :). You Rock
Excellent video, you really helped me consume the APIs, I love how you explain it without turning the tide, and I really appreciate that you teach how to read the documentation correctly, and you use very good practices to improve the code.
I enjoyed this video... It really breaks it down using the API for Google Maps... Adding points to directions would be great also.
OMG! Dude, yeah, you rock. I have been messing around with the Place API and trying to get it to work with no success. It runs with no errors, yet I get no data back. I looked at axios but didn't want to install it via npm. However, think I will try it again by including the library
Good thing about Chrome console is that you can right click on the object property and copy the whole path. Just to be easier for u, probably u already know this but maybe it could be helpful for someone. Great tutorial as always!
Next with Vue or React. This series is very helpful since maps are requested by Clients A LOT in the real world for freelancers.
Good Job, @Brad !
The result of merging this app and the previous one (Google Maps API App) will definitely be a much useful app.
Brad, thank you for all your videos, both on TH-cam and Udemy. It has helped me a lot. Keep the excellent work!
I have loved and followed all through without loosing. Thanks so much for this tutorial
This is awesome! I was after something EXACTLY like this today! I just followed along, and managed to change it to suit my needs.
Paid for a UDEMY course as a thanks btw. Not going to watch that until I'm through the TH-cam stuff.
Thanks Brad. I have a project where I'm going to implement what I've learnt in these tutorials. Thank you so much.
Powerlifter + programmer = double like from me.
I think this is a simple tutorial but contains big value, thaNK yOu
I wonder how a video so good like this has 34 unlikes. what do people want?
wow Brad! you just made it so easy to understand!
Another awesome video! I'm hoping for the day you release a "Mega course" for many different technologies with assignment and projects, mentorship etc.. no one seems to teach like you do!
You gave me the possibility to include my first api in my website, thanks a lot for this. I send you a lot of love from France
Your videos always helped me a lot. Btw can you please make a playlist on all the APIs by google like gmail, etc
Awesome as usual!! Please do a Javascript voice recognition app (like Jarvis, it's getting trending this days. Thank you very much! :D
Subbed m8, great video. I can't wait until I'm as fluid as you!
How long have you been coding for?
I keep getting axios is not defined in the console even when i paste in Brad's code? Anybody else?
Hello, did you solve it?
Very nicely explained the complete process in java coding. Thanks bro
Very Helpful...Even after four years👌
This has been great. would love to see more google api videos
This is really helpful, I used this in my current project, Thanks Brad.
Brad you are awasome. Excellent explain with code. keep on creating videos.Thank you so much
Awesome! I'd like to see more tutorials about popular API's like Facebook, Instagram, Twitter and Paypal :D
Thanks Man. Great Insights in the Subject. Great Work
Thank you so much Brad. This stuff about Google APIs is super-awesome
Great tutorial.. The best for Google API on youtube!
Thanks Brad you are awesome. Keep doing API's im learning alot from your tutoriala
As always, easy to understand and apply. Thanks!
BIG Thanks Brad. I really enjoy your videos 🖒
Brad, you are amazing, thank you man. How about creating some series of videos about Javascript and jQuery validations in a real example?
Thank you teacher , and what if I store all the address in my database and I want all of them to be lat/lng so that I can put marker on the map.How to do that sir ?
Were you able to figure that out?store all the address in my database and I want all of them to be lat/lng so that I can put marker on the map
Thank you very much!! Greetings from Greece. ΑΞΙΟΣ!!
Thanks I had lots of fun doing this project!!
Great video! How about using places? Like using the current location of the user to see the closest store. I saw it in a website but can't figure out how to do it. In fact, it shows the closest store of a brand. It will be nice.
dude, that was one superb tutorial. thanks !
Hi Brad, great video. But what about a video showing how to select areas on a map with the mouse drag and retreat this info to a form or better still a simple google spreadsheat
card-block was substituted by card-body in bootstrap 4
good job brother . one think i couldn't find and will be great if you can do a tutorial about is how to fix the gray area when dragging the map (load tiles while dragging map ) . thank you
I am not able to create my billing account of GCC..thus I am not able to get API credentials.Anyone knows what I need to do now?
you are king, thank you brad, Y'as pas une Moyen On api to know the altitude and longitude of a point on maps
Nice i really enjoyed the tutorial and thank's for the clear concept.
Great video! Just what I've needed :) Thank you
I am getting error Uncaught ReferenceError:axios is not defined at HtmlFormElement.geocode
error is at axios.get('maps.googleapis.com/maps/api/geocode/json',
Brad, just a quick question, I have VFP database table with my customer information. The address is part of the record. Is there a way to scan that table to show markers on the map of all my customers? thanks...great videos.....
excellent explanation .... u have a knack Man
Great tutorial as always!. Thank you very much!
Hi thank you for this. Can we get full residential/commercial addresses on user location so they can select their address, rather than typing their home/business address?
Very very smart web developer 👍👍👍👍
Great video. Answered a lot of questions. Any chance you can show how to put the variables iinto a mysql table using php. Cheers
this is great so easy to follow
Thank you for this valuable video. I would like to ask you how can we display that into a map so that the place we are searching for will be displayed rather that just view the information
Hi Brad
Thanks a lot
can you please suggest how to protect the key means the key will be visible in network tab and can be used by others so anyway we can protect it ?
Actually in my project I am doing ajax call taking address text in search textbox and getting Lat-Long
so its all client side hence key is visible in network tab ...
Please suggest Sir ..Thanks in advance
if I catch the longitude and latitude of address, what property in google api's response should I use? because the location property in it is not accurate when I place it to the static map
Great as always.
Do you have any premium course of how to create a cms or even a complete blog using PHP without a framework?
Please correct me if I'm wrong, but as of October 2021 using this API costs money. $5.00 for each 1,000 requests made.
well it asks to enable billing now... as of Jan 2023...
that was helpful....thanks a ton. what i want to implement is autocomplete, mark the location on the map and return the lat-lng to be stored in the database. really stuck in it. can you come up with more help?
Thank you so much Brad!! Big thumbs up
Did you ever do the reverse geocoding video? Looking how to cleanly get a city name back for any set of coordinates. Thanks!
thanks for video. i think your teaching about working with javascript is better than google api :-)
Thanks. Yeah I wanted to highlight practices in writing JavaScript as well. Glad you liked it
Do you think you can make a video on Bootcamp, how useful its is, the difficulty and the job opportunity and such?
Excellent video. Tks Brad
Great tutorial, keep it up
Thank You, Sir. You're the best
hi is the video for the incorporation for both up (display nearby facilities based on user input address)? thnx in advance!
Thanks so much for this. Helped a lot. What if I wanted to return two addresses and values? Right now I get axios to return the address values in my form but I also want to geocode another address at the same time. Would I have to create a second geocode function or am I better off using the waypoint api?
great video, could you please make a tutorial about the MERN stack? I am currently learning react and express but i have no idea how to combine them.
This is just awesome. Thank you so much!
How can you put the lng and lat from this video to create a marker from the previous video? Tried a lot with no luck. It would be great if you could show how to do that
Did you ever make a video where you combine this with the previous google map video you built?
Lovely Video Travery, Im working on a similar thing, but now im Using React. The Idea is that when you submit your address the results is an updated Map, with the inserted location. Im kinda stuck with the events part as I have to Components, Map and Input Component.
Thank you so much for this. Can you make something like: take your geolocation and then add two points on the map and then calculate the closest distance from you to one of the two points. Thanks
I made one request and the console gives me an error of "OVER_QUERY_LIMIT". what should I do now? Please help me out!
Hello , with the parameters sent with axios, how can we restrict the searches for a certain country only. I have added componentRestrictions: {
country: 'RO'
} to params object and it does not work. Can you guys help me? thanks
Hi, I have a question. How could I check if the geocoded address is matched to the correct location on the map ,the status or the confidence ? is there any function can be applied for this purpose in JavaScript or Python .
Thanks in advance.
can i ask how to get your exact location without entering your exact address and make it required to know the exact location of the user who submit it?
thank you this video help me to resolve my problem.
Thank you very much brother, this very much helpful
Great tutorial. Question: How do I geocode more specific establishments like type of restaurants? How do I code that?
Great Vid !!! Thanks a lot !!! Was very helpful !!!
Is there any way to do a google API geocode from an address without having any external javascript. I.e. without having the axios javascript? I ask because with server-side PHP there is no need for 3rd-party code.
You rock man! Congratulations
Many thanks from a desperate late 20s.
Brad..After watching ur Graph API Video, it would be great if you can teach us about working with Facebook Graph API + Vue JS. Thank you MAN.
awesome work brad
what would the code look like if you wish to add the use Time Zone API Google to the form.? Thank you