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
- How To Enable Geocoding API
- Convert Address To Latitude & Longitude
- Convert Latitude & Longitude To Address
- Geocoder Using JavaScript SDK
- Geocode API Price
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:
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.
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.
Top comments (0)