Google Maps API Tutorials (JavaScript)

Google Maps API Geocode Explained [2023]

Last modified on June 10th, 2023
Raja Tamil
Google Maps API Javascript

Google Maps Geocode API Convert Address To Lat Lng

By the end of this tutorial, you’ll have a better understanding of how to use Google Maps Geocoding API using its HTTP Interface as well as JavaScript SDK.

Google Geocoding API

Geocoding API is one of the many services that Google Maps API eco-system offers.

Geocoding is a process of converting a human readable physical address into geographic coordinates (latitude and longitude values).

One of the very common uses is when you want to show a business location on the Google Maps on the website.

In order to use Geocoding API, you’ll need to do two things:

FREE 1-HOUR COURSE:
Vue JS & Google Maps API

ACCESS FREE COURSE NOW

Enable Geocoding API

In your Google Cloud Platform Console, go to APIs & Services Dashboard → Enable APIs & Services at the top and choose Maps JavaScript API from the API Library.

This will open up the Maps JavaScript API page and Enable it.

Then, scroll down to “More solutions to explore” and choose Geocoding API Enable it.

Convert Address To Latitude & Longitude

Let’s convert an actual street address into geographical coordinates in the form of latitude and longitude which is called Geocoding as I mentioned earlier.

Sometimes, you may get a CORS error and you can fix it by appending the proxy server URL such as heroku.

const address = "111 Wellington St, Ottawa, ON K1A 0A9, Canada";

fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=[YOUR_API_KEY]`)
.then((response) => {
    return response.json();
}).then(jsonData => {
    console.log(jsonData.results[0].geometry.location); // {lat: 45.425152, lng: -75.6998028}
})
.catch(error => {
    console.log(error);
})

Once you’ve access to latitude and longitude values, you can Create a Google Maps object and Place/Position the address on the map using Marker.

FREE 1-HOUR COURSE:
Vue JS & Google Maps API

ACCESS FREE COURSE NOW

Convert Address To Latitude & Longitude

Let’s see how to convert Latitude and Longitude values to a street address. This process is called Reverse Geocoding.

const latLng = "45.425507, -75.700233";

fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${latLng}&key=[YOUR_API_KEY]`)

.then((responseText) => {
    return responseText.json();
})
.then(jsonData => {
    console.log(jsonData.results[0].formatted_address); //111 Wellington St, Ottawa, ON K1A 0A9, Canada
})
.catch(error => {
    console.log(error);

})

This is a great option when you want to detect a user’s current location from a browser and convert it into a street address.

Geocoder Using JavaScript SDK

You can also use Google Maps Geocoding API service via its JavaScript SDK using Geocoder instead of using the API URL directly.

To do that, add the JavaScript SDK CDN to your index.html file.

Make sure to add your own API Key.

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=initialize" async defer></script>

As soon as the JavaScript SDK is loaded into the browser, the initialize function will be called.

Inside the initialize function, convert the street address to latitude and longitude values using the Geocoder object.

const address = "111 Wellington St, Ottawa, ON K1A 0A9, Canada";

function initialize() {
    
    geocoder = new google.maps.Geocoder();

    geocoder.geocode({
        address: address
    }, (results, status) => {
        if (status == google.maps.GeocoderStatus.OK) {
            console.log(results[0].geometry.location.lat());
            console.log(results[0].geometry.location.lng());
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });

}

Similar to the request above, you can also do the same to convert latitude and longitude values to a street address aka Reverse Geocoding.

Google Geocode API Price

When you’re setting up your billing at the time of Creating your own API Key, you’ll be given a one time $300 FREE credit and a monthly recurring $200 FREE credit at the time of writing this tutorial.

Google charges $0.005 / Geocoding request and you can make 40,000 Geocoding API requests per month with the FREE $200 credit which is more than enough.

Conclusion

You’ve learned what Geocoding and Reverse Geocoding are and how to use Google Maps Geocoding API to convert an address to latitude and longitude values and vice versa.

I also showed you two different ways of accessing Google Maps Geocoding API which is either using the Geocoding API URL directly or Google Maps Geocoding JavaScript SDK using Geocoder.

If you’ve any questions, suggestions or want to add something to this tutorial, feel free to send me a quick message by commenting below.

Happy Coding.

Recommended

FREE 1-HOUR COURSE:
Vue JS & Google Maps API

ACCESS FREE COURSE NOW