Get Latitude and Longitude from address in javaScript

To get latitude and longitude from address in javascript; Through this tutorial, i am going to show you how to get latitude and longitude from address in javascript.

In this tutorial, i will use google maps or geo location apis to get latitude and longitude from address in javascript.

How to Get Latitude and Longitude from address jQuery / Javascript

Use the following steps and get latitude and longitude from address google map api in javascript:

Get a Google Maps API Key
Create index.html
Call Google API with address for lat and long

1. Get a Google Maps API Key

You will need an API key before you can make calls to the Google Maps Geocoding service.

First, you will have to visit: https://cloud.google.com/maps-platform/?_ga=2.27293823.277869946.1577356888-568469380.1576660626#get-started and get the API key.

To get an API key:

Visit the Google Cloud Platform Console.
Click the project drop-down and select or create the project for which you want to add an API key.
Click the menu button and select APIs & Services > Credentials.
On the Credentials page, click Create credentials > API key.
The API key created dialog displays your newly created API key.
Click Close.
The new API key is listed on the Credentials page under API keys.
(Remember to restrict the API key before using it in production.)

2. Create index.html

Create a simple html file and update the below code into your file:

<!DOCTYPE html>
<html>
<head>
	<title>Get latitude and longitude from address google map api javascript</title>
</head>
<body>
<div>
     <h3> Enter an adress and press the button</h3>
    <input id="address" type="text" placeholder="Enter address here" />
    <button id="btn">Get LatLong</button>
    <div>
        <p>Latitude:
            <input type="text" id="latitude" readonly />
        </p>
        <p>Longitude:
            <input type="text" id="longitude" readonly />
        </p>
    </div>
</div>
</body>
</html>

3. Call Google API with address for lat and long

Create a javascript code for calling the google geocode v3 address api to get latitude and longitude from address.

Note:- Don’t forget to put your google map api key here:

<!-- Add the this google map apis to webpage -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=PUT_GOOGLE_API_KEY&libraries=places"></script>
<script>
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('address');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
// place variable will have all the information you are looking for.
  document.getElementById("latitude").value = place.geometry['location'].lat();
  document.getElementById("longitude").value = place.geometry['location'].lng();
});
}
</script>

Note: when you type the address in the text field. It will autocomplete and call the javascript to initialize() function. This function will return the latitude and longitude from the address using the google v3 geocode API.

Full source code

You can see the full source code for getting the latitude and longitude from address using the google geocode v3 API.

<!DOCTYPE html>
<html>
<head>
	<title>Get latitude and longitude from address google map api javascript</title>
</head>
<body>
<div>
     <h3> Enter an adress and press the button</h3>
    <input id="address" type="text" placeholder="Enter address here" />
    <div>
        <p>Latitude:
            <input type="text" id="latitude" readonly />
        </p>
        <p>Longitude:
            <input type="text" id="longitude" readonly />
        </p>
    </div>
</div>
<!-- Add the this google map apis to webpage -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=PUT_GOOGLE_API_KEY_HERE&libraries=places"></script>
<script>
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('address');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
// place variable will have all the information you are looking for.
  document.getElementById("latitude").value = place.geometry['location'].lat();
  document.getElementById("longitude").value = place.geometry['location'].lng();
});
}
</script>
</body>
</html>