To get longitude and latitude from address google map API using javascript; In this article, you will see how to get latitude and longitude from address google map api with javascript;
This article will explain to get the longitude and latitude from the address using the google Maps APIs using jquery or javascript.
Get Longitude and From address Google Map API using javaScript
- Get a Google Maps API Key
- Create file index.html
- Call Google MAp API with address for latitude and longitude
1 – Get a Google Maps API Key
First You need to create google map API key earlier you can make Api 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:
- Go to the Google Cloud Platform Console.
- Click the project, select or generate the project for which you want to add an API key.
- Click the above menu button and select APIs & Services and > Credentials.
- On the Credentials page, click generate credentials > API key.
- The API key created dialog displays your new created API key.
- Click to Close.
- The newly API key is listed on the Credentials page within API keys.
- ( Note: Before using it in production restrict the API key )
2 – Create file index.html
Create index.html file and add the given 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 latitude and longitude
Now, you have to javascript code for executing the google geocode v3 api with the address to get lat and long from address.
Note:- Don’t forget to add your google map api key here:
https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=PUT_GOOGLE_API_KEY_HERE&libraries=places
<!-- 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 enter the address in the text input. It will autocomplete and request the javascript to initialize() function. This function will return the lat and long from the address using the google v3 geocode API.
Full source code
Full source code for getting lat and long from address using the google map geocode v3 API in javascript; as given below:
<!DOCTYPE html>
<html>
<head>
<title>Get latitude and longitude from address google map api javascript</title>
</head>
<body>
<div>
<h3> Enter an addxress 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>
0 Comments