Google Maps API Geocode Explained [2022]
Tags: javascript, webdev, beginners, programming
Published: 2022-06-20 12:12:53

---
canonical_url: https://softauthor.com/google-maps-api-geocode-explained-2022/
---

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**.

- [What is Google Geocoding API](https://softauthor.com/google-maps-api-geocode-explained-2022/#what-is-google-maps-geocoding-api)
- [How To Enable Geocoding API](https://softauthor.com/google-maps-api-geocode-explained-2022/#enable-geocoding-api-library)
- [Convert Address To Latitude & Longitude](https://softauthor.com/google-maps-api-geocode-explained-2022/#geocode-api-address-to-latitude-longitude)
- [Convert Latitude & Longitude To Address](https://softauthor.com/google-maps-api-geocode-explained-2022/#geocode-api-latitude-longitude-to-address)
- [Geocoder Using JavaScript SDK](https://softauthor.com/google-maps-api-geocode-explained-2022/#geocode-api-latitude-longitude-to-address)
- [Geocode API Price](https://softauthor.com/google-maps-api-geocode-explained-2022/#google-geocode-api-price)


###Google Geocoding API

**Geocoding API** is one of the many services that [Google Maps API](https://softauthor.com/what-is-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:

- [Get An API Key](https://softauthor.com/google-maps-api-key/)
- [Enable Geocoding Library](https://softauthor.com/google-maps-api-geocode-explained-2022/#enable-geocoding-api-libaray)

###Enable Geocoding API

In your [Google Cloud Platform](https://console.cloud.google.com/google/maps-apis/overview?pli=1) 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.

![alt text](https://softauthor.com/wp-content/uploads/2019/08/enable-maps-javascript-api.png)

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

![alt text](https://softauthor.com/wp-content/uploads/2019/09/google-enable-geocoding-api.png)

###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](https://softauthor.com/how-to-fix-cors-issue-permanently-right-now/) and you can fix it by appending the **proxy server URL** such as heroku.

```JavaScript
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](https://softauthor.com/google-maps-api-show-map/) and [Place/Position the address on the map using Marker](https://softauthor.com/google-maps-api-place-a-marker/).

###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**.

```JavaScript
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](https://softauthor.com/vuejs-geolocation-get-user-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](https://softauthor.com/google-maps-api-key/).

```HTML
<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.

```JavaScript
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](https://softauthor.com/google-maps-api-key/), you’ll be given a one time [$300 FREE credit](https://mapsplatform.google.com/pricing/) 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.