Javascript Geolocation API Project to Extract Country,State,City & Zip Code From Google Autocomplete

uh hello guys today in this tutorial i will be showing you a new tool that i developed in freemakertools.com and in this video i will be showing you live how i deploy tools to my website freemediatools.com to a vps server so basically this is a tool here which lets you extract the country name state name city name and zip code from an automatic location that you enter inside this input field so this makes of use of two apis which is google geocoding api and google places auto complete api so basically here you will enter any sort of real time address say it will be auto complete so whenever you type here you will be getting suggestions here from it so for this to work i need to copy paste my api key so i will just paste my api key inside the project so i will just go to this location here simply paste the api key and again open this so now you will see if i enter any sort of location you will see i am getting these suggestions here so if i select any sort of location in the world here you will see it will extract the country name which is indonesia state name which is this city name and the pin or the zip code so you will see one zero three one zero so this is very much useful in those situations when you want any sort of this information pin or zip code city state from a complete address name so in those situations it this tool will be very much useful so you can just now write some more address here let's suppose this address so you will see now it will append it to the second row here so you can repeat this for any address in the world so you don't need to write a long address if you write a short address also it will automatically fetch the country state city and pen or zip code so this tool is very versatile so you need to just write a very simple short address also so it will fetch the country state and city and zip code so this is the tool that we will be developing in this tutorial so this is built in using pure javascript node nodejs server is installed in this so so first of all i i will highly recommend that you go to the video description link to download all the source code this is my step-by-step blog post that i have written here so alongside with all the instructions so this is a single index.html file that you will need here so simply here you need to copy paste your google api key here you need to go to google cloud console so here you need to simply paste your google api key for this project to work here so you for this you need to be having a google cloud account here so simply type here on google first of all go to google here and type here google cloud console so you should be having the cloud console account here so this is a google map api so after that just create your google cloud account and i will be going to my dashboard here so simply here also you can create your own api key clicking on create credentials and this clicking copy so i will just copy this key here so at the end of this tutorial i will just delete this so you can't use this api key anymore so for this application to work this is very much useful so i will call delete all the code here and start from scratch so for building this application i have used some bootstraps so you can go to bootstrap just type here bootstrap cdn and go to you w3schools.com and we only need the css part so simply paste the css part after the title so we can also change the title which is extract country state city and zip code from address so here we will use the container class of bootstrap we will be giving a text heading here the same heading here which is so after that we will be having a simple input field here so also we will be attaching the container class to it so here we will be having input we will be attaching form control class or bootstrap so this will be of type text and we will be giving a id to it of search input field and here we will let the user that enter your location so this will be your auto complete field here so basically if i now open this with live server so you will see this is the location input field so now we simply need to write the javascript to bind this input field to the google api so for this we will need some jquery so simply go to w3schools.com and simply copy paste the cdn paste it just after the body here that's it so inside the script section so we also need to include the cdn for the script tag here this is a google map api so this is very much necessary after the body paste is stacked so just go to the video description link to get all the source code so here you need to copy paste your api key so just go to your google cloud account copy your api key like this and paste it and now after that what we can do is that i am just following my blog post here so if you want to get the reference here you can go to the video description link so we will declare some variables at the top here which are global variables which will hold the places input address city so inside google maps here we have this event here which whenever the google maps event load here inside the window we need to write this code inside this function so after that we need to bind this so this binding is very much important so we will bind the google autocomplete to the input field here so paste this code so simply what is doing is that it is taking the id that we have given to it which is search text field so it just needs to be search text field so it is binding it to the autocomplete of the google places api that's it so now at this moment of time if you open this now you will see hopefully it will show the autocomplete results you will see it is now showing the autocomplete address here so now we are successfully binding it so now we simply need to get the address which the user has selected for that purpose get the address which user has selected for that specific purpose we have another event called as places changed event so if you go to the video description link you will find this so this needs to be there inside this this parent event listener you need to write this code here only so whenever the place is changed here this event will automatically fire and you will find all this information inside this places object so we can console log here places dot get place like this so we can now see the information here in the console here so what address has the user has typed here is saying expired key map error so let me paste this api key so sometimes it can give you error here so you will see if i select this address here you will see this object will be returned to you with the details here with which inside this which is address component so all this information is returned to you photos as well you will see reviews all all that stuff so for our purpose we only need the city state and pin code information so we can just nail down the information that we want here so if you follow the blog post here so we will declare these four variables inside this which will actually store the address latitude longitude geocoder so for this purpose we are also using the geocoding api to convert the address into actual city and state names so after that we are calling this geocoder.gcode method here so let me just paste this here so this is a long code which can actually converts this is a formatted address to an actual address pin code country name state and city just put a if i now paste it here like this so you will see after getting this information if i console log it we are now selecting the table which we have created here after the div element you need to create a table so inside your dom element we will simply create a table here simply copy this and paste it so we have given the bootstrap class of table here and inside this we have four headings here country state city and pay no zip code and then we are dynamically inserting a table row here with the default information which is country state city and pin and lastly we are appending it the road to the table so this is the id we have given to the table body tag so if you enter it you will see now this will have this information dynamically entered here you will see so now the tool is complete now we simply need to deploy it to the freemediatools.com website so i will also show you how i deploy tools to this vps server so this is very much easy so we will deploy it live here and after deploying it i will give the link in the video description you can check the demo so i use a tool called as footy here which is a vps ssh client and also i use a program called as filezilla which is a ftp program which allows to kind of transfer files to the server so i will put the information here so it will connect it so you will see it is connecting it let me connect it sometimes it can give you error here this is a website that i deployed this vps here so you will find here let me login into it i think it is not connecting to the server here so just fit let me paste the ip address here and then connect it you so as you can see guys it is not connecting so after this video i will deploy this tool and you will find the link in the video description so where you can find the tool here so just go to the video description link to download all the source code and try this tool inside free media tools.com website and i will be seeing you in the next video

Channel: Coding Shiksha

Views: 12,957

Keywords: coding shiksha, extract zip code from location, geolocation api, google autocomplete, google places autocomplete

Id: B7WPXwj22gM

Length: 16min 34sec (994 seconds)

Published: Sun Dec 26 2021