Get Latitude and Longitude From address Google Geocode API jQuery/javascript

Get Latitude and Longitude From address Google Geocode API jQuery/javascript

If you want to found how to get latitude and longitude from Google Maps in jquery /javascript. So You have the right place. This tutorial explains to get the latitude and longitude from address using the google map APIs in jquery / javascript.

Get Latitude and Longitude from address jQuery / 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:

  1. Visit the Google Cloud Platform Console.
  2. Click the project drop-down and select or create the project for which you want to add an API key.
  3. Click the menu button  and select APIs & Services > Credentials.
  4. On the Credentials page, click Create credentials > API key.
    The API key created dialog displays your newly created API key.
  5. 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

Next step, 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

In the final step, In this step, we 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&amp;sensor=false&amp;key=PUT_GOOGLE_API_KEY_HERE&amp;libraries=places"></script>




<!-- Add the this google map apis to webpage -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;key=PUT_GOOGLE_API_KEY&amp;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&amp;sensor=false&amp;key=PUT_GOOGLE_API_KEY_HERE&amp;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>