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

Welcome folks today in this blog post we will be using the geolocation api to extract the country,state,city and zip code from google autocomplete in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<head>
	<script src="https://maps.googleapis.com/maps/api/js?key=##apikey##&v=3.exp&sensor=false&libraries=places"></script>
	<link
	  rel="stylesheet"
	  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
	/>
	<title>Extract Country,State,City & Zip Code From Location in Javascript</title>
  </head>
  <body>
	<div class="container">
	  <h1 class="text-center">Extract Country,State,City & Zip Code From Location in Javascript</h1>
	  <br /><br />
		<div class="form-group container">
		  <label for="location">Enter Location: (Autocomplete)</label>
		  <input type="text" id="searchTextField" class="form-control" />
		</div>
		<br />
		<table class="table">
	  <thead>
		<tr>
		  <th>Country</th>
		  <th>State</th>
		  <th>City</th>
		  <th>Pin or Zip Code</th>
		</tr>
	  </thead>
	  <tbody id="body">
	  </tbody>
	</table>
	  </div>
	</div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
	let places, input, address, city;
	google.maps.event.addDomListener(window, "load", function () {
	  var places = new google.maps.places.Autocomplete(
		document.getElementById("searchTextField")
	  );
	  google.maps.event.addListener(places, "place_changed", function () {
		var place = places.getPlace();
		console.log(place)
		var address = place.formatted_address;
		var latitude = place.geometry.location.lat();
		var longitude = place.geometry.location.lng();
		var latlng = new google.maps.LatLng(latitude, longitude);
		var geocoder = (geocoder = new google.maps.Geocoder());
		geocoder.geocode({ latLng: latlng }, function (results, status) {
		  if (status == google.maps.GeocoderStatus.OK) {
			if (results[0]) {
			  var address = results[0].formatted_address;
			  var pin =
				results[0].address_components[
				  results[0].address_components.length - 1
				].long_name;
			  var country =
				results[0].address_components[
				  results[0].address_components.length - 2
				].long_name;
			  var state =
				results[0].address_components[
				  results[0].address_components.length - 3
				].long_name;
			  var city =
				results[0].address_components[
				  results[0].address_components.length - 4
				].long_name;
				console.log(country)
				console.log(state)
				console.log(city)
				console.log(pin)
			   let row = `
			   
			   <tr id="country">
		  <td>${country}</td>
		  <td>${state}</td>
		   <td>${city}</td>
		   <td>${pin}</td>
		</tr>
	   
			   
			   `
			   $("#body").append(row)
			}
		  }
		});
	  });
	});
  </script>

<head>

<link

rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"

<title>Extract Country,State,City & Zip Code From Location in Javascript</title>

</head>

<body>

<h1 class="text-center">Extract Country,State,City & Zip Code From Location in Javascript</h1>

<label for="location">Enter Location: (Autocomplete)</label>

</div>

<br />

<thead>

<tr>

<th>Country</th>

<th>State</th>

</tr>

</thead>

</tbody>

</table>

</div>

</body>

let places, input, address, city;

google.maps.event.addDomListener(window, "load", function () {

var places = new google.maps.places.Autocomplete(

document.getElementById("searchTextField")

);

google.maps.event.addListener(places, "place_changed", function () {

var place = places.getPlace();

console.log(place)

var address = place.formatted_address;

var latitude = place.geometry.location.lat();

var longitude = place.geometry.location.lng();

var latlng = new google.maps.LatLng(latitude, longitude);

var geocoder = (geocoder = new google.maps.Geocoder());

geocoder.geocode({ latLng: latlng }, function (results, status) {

if (status == google.maps.GeocoderStatus.OK) {

if (results[0]) {

var address = results[0].formatted_address;

var pin =

results[0].address_components[

results[0].address_components.length - 1

].long_name;

var country =

results[0].address_components[

results[0].address_components.length - 2

].long_name;

var state =

results[0].address_components[

results[0].address_components.length - 3

].long_name;

var city =

results[0].address_components[

results[0].address_components.length - 4

].long_name;

console.log(country)

console.log(state)

console.log(city)

console.log(pin)

let row = `

<td>${country}</td>

<td>${state}</td>

</tr>

$("#body").append(row)

}

});

</script>

As you can see we are using the places api and geolocation api and here you need to replace your own api key from google cloud console and then we are displaying all these details inside the table.