To get latitude and longitude from address google map API javascript; In this tutorial, you will learn how to get latitude and longitude from address google map api javascript;
This tutorial will explain to get the latitude and longitude from the address using the google Maps APIs in jquery or javascript.
Get Latitude and Longitude From address Google Map API 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 need to create google map API key before you can make calls to the Google Maps Geocoding service.
First of all, you 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 add the following 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
In this step, you will create a javascript code for calling the google geocode v3 api with the address to get latitude and longitude from address.
Note:- Don’t forget to put your google map api key here:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=PUT_GOOGLE_API_KEY_HERE&libraries=places"></script>
Like following:
<!-- 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
Complete source code for getting latitude and longitude from address using the google map geocode v3 API in javascript; as shown below:
<!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>
Great post bro…