Here is a New Way To Search Within Google Maps with Geocoding API
Internet users across the world rely on Google Maps for everyday traffic navigation as well as searching for interesting places. You key in the address of the place and it pops out a balloon pinned to the location on the map. This is known as geocoding (getting lat long from an address). But what if you suddenly get dropped somewhere in the middle of an unknown city? The first thing you want to find out is the address of your current location. This is known as reverse geocoding.
With the help of Google Maps Geocoding API, you can easily achieve both. Moreover, you can also leverage this API with the Google Maps SDK to build an address hunting feature on Google Maps. Want to know how? Then follow along this blog post to see how we build a simple web app to experience Google Maps in a different way.
How to Get Access to the Google Maps Geocoding API?
Google Maps Geocoding API provides the endpoints for performing geocoding as well as reverse geocoding. To build the web app with Google Maps Geocoding API on RapidAPI, follow the steps below to activate the API with your RapidAPI account.
1. Sign Up for RapidAPI Account
To begin using the Google Maps Geocoding API, you’ll first need to sign up for a free RapidAPI developer account. With this account, you get a universal API Key to access all APIs hosted on RapidAPI.
RapidAPI is the world’s largest API marketplace, with over 10,000 APIs and a community of over 1,000,000 developers. Our goal is to help developers find and connect to APIs to help them build amazing apps.
2. Subscribe to Google Maps Geocoding API
Once signed in, log in to your RapidAPI account and access the API console.
Now click on the “Pricing” tab and opt-in for the basic subscription that gives you 500 free API calls to Google Maps Geocoding API per month.
How much does the Google Geocoding API cost?
The API has 3 pricing tiers depending on your usage as seen in the image above:
- Basic — $0/month — 500 API calls/month — $0.01/call for overages
- Pro — $5/month — 1,000 API calls/month — $0.005/call for overages
- Ultra — $400/month — 100,000 API calls/month — $0.004/call for overages
Is the Google Geocoding API free?
While the API isn’t completely free, it does offer a Basic freemium plan that allows developers to use the API up to 500 times/month.
3. Test Your API Subscription
Once you are subscribed, come back to the “Endpoints” tab. Here is a closer look at the two endpoints.
Select the “ GET Reverse Geocoding” endpoint and hit the “Test Endpoint” button with the default parameters.
You will notice that the API performs a reverse geocoding of the location coordinates passed in the ‘ latlng ‘ parameter. In this case, the coordinates “40.714224,-73.96145” are converted to an address in New York, USA.
The API also returns each address component as part of the JSON array.
If you got the same API response along with HTTP status code 200, then you are good to go. In the next section, we will look at leveraging this endpoint to build a webapp on Google Maps.
Address Hunting on Google Maps
So what is address hunting?
Whenever you search for a building on Google Maps, you are almost always sure about the name and address of the building. But, what if you are in a situation when you do not know the name. You probably just recall the name of the street or the road, or maybe a nearby landmark.
Using the reverse geocoding feature of Google Maps Geocoding API, you can get the address of a location coordinate as long as you hunt down the landmark icons and labels on the Google Maps with mouse clicks. That’s exactly what we are going to do with the address hunting web app.
Video: https://rapidapi.com/blog/wp-content/uploads/2020/02/google-maps-address-hunting.mp4?_=1
Follow the steps below to build a demo HTML page that loads Google Maps with the address hunting feature, powered by Google Maps Geocoding API.
How to use the Google Maps Geocoding API with JavaScript
1. Create The Static HTML
We start with the boilerplate Google Maps HTML page. The UI contains a single <div>
element to hold the Google Maps instance and we add some CSS to extend it across the entire viewport.
see the full code at: https://rapidapi.com/blog/google-maps-geocoding-api/
You must replace the placeholder <YOUR_GOOGLEMAPS_APIKEY> with your own API key for Google Maps JavaScript API, obtained from the Google Cloud Platform console.
Note: Google has recently changed the way you get an API key for Google Maps. If you have an older API key for Google Maps, you will have to migrate that to a new billing account under the Google Cloud Platform. Otherwise, you have to set up a new Billing account. You can still use your older key without the billing account but Google Maps will display an overlay text “For development purposes only” upon rendering the map.
2. Initialize the Map and Set Default Zoom and Position
With the HTML in place, you can now initialize the Google Maps Javascript SDK to load the map.
Define a new <script>
block inside <body>
, after the <div id="map"></div>
declaration.
see the full code at: https://rapidapi.com/blog/google-maps-geocoding-api/
This code initializes the Google Maps JavaScript SDK. It sets the map position to your device position, detected from the HTML5 geolocation API, and sets the zoom level to 6.
3. Add Reverse Geocoding Capability To Display Address on Mouse Click
With the Google Maps initialized, it’s time to enable address hunting. We will use the mouse click on the Google Maps UI as a means to trigger the Google Maps Geocoding API and display the address.
For this, we have to first capture the location coordinates at the point of mouse click and then pass the latitude and longitude value of that coordinate to the Google Maps Geocoding API. The address returned from the API response is displayed via the google.maps.InfoWindow
object which we have already initialized.
Here is the code for handling the mouse click inside Google Maps. You can add it after the infoWindow = new google.maps.InfoWindow;
statement.
see the full code at: https://rapidapi.com/blog/google-maps-geocoding-api/
You can notice that we have an AJAX call inside the event handler to invoke the Google Maps Geocoding API. The settings for the AJAX call have to be defined as a separate variable at the beginning of the <script>
block as follows.
see the full code at: https://rapidapi.com/blog/google-maps-geocoding-api/
This settings
variable contains the AJAX parameters including the API headers. Here you have to replace the placeholder <YOUR_RAPID_API> with your RapidAPI subscription key.
We are now done with the code.
The Final Showdown
Here is the complete code in case you want to copy and paste it in one shot.
see the full code at: https://rapidapi.com/blog/google-maps-geocoding-api/
Copy this code in a code editor, replace the placeholders with your RapidAPI and Google Maps subscription keys and save it as a .html file.
Launch this HTML file on the browser. You will be prompted by the browser for your consent to allow location sharing on this HTML page.
Once you do that, Google Maps will load and will be centered around your position. Click anywhere on the map and you should see a popup displaying the address of the location where you clicked.
And that’s it for this API tutorial.
I hope you had good fun building this web app with Google Maps Geocoding API and Google Maps Javascript SDK. Go ahead and see if you can explore and find some really good use cases for address hunting on Google Maps. We can’t wait to see it working in a real-world app.
Originally published at https://rapidapi.com on February 5, 2020.