Get Started With Google Geocoding API for Location Data

We've managed to create the capability for users to query for a list of listings that can be sorted based on listing price. In this module, we'll focus on the functionality that will allow our users to search for listings based on location. We'll begin the investigation for this by discussing the API we intend to use to help us - Google's Geocoding API.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

We have a collection of listings stored persistently in our database, and we've created the listing ID route in our client to allow users to view one listing at a time. And we've managed to create the capability to query for all the listings we want sorted based on the listing price. Let's now create the functionality that would allow users to search listings based on location. There's probably many ways to accomplish this. A very simple approach could be that we allow users to fill out a form and we provide options for city, a state, a country, and in our database we can have our listing documents contain disinformation, and we can filter and try to find the correct listings based on user inputs. This is a more self-developed approach, and there's a lot of questions to think about here. How do we handle spelling mistakes? How do we accept information for many different regions in the world where certain regions may not have the concept of a state or maybe a city? We personally would want something a little bit more robust, perhaps like how Airbnb handles it. With Airbnb, for example, we just provide one particular input value, and the user can type a city, a state, a country, a combination of those, and the server will find the correct listings that best matches the user's input. And lucky for us, there's a perfect API we can use for this, and this is where we'll use Google's Geocoding API. Google's Geocoding API is a service that provides geocoding and reverse geoc oding of addresses. Geocoding is the process of converting addresses like a street address into geographic coordinates, like latitude and longitude, which we can place markers on a map or maybe position the map with. Reverse geocoding is sort of the reverse, is the process of converting geographic coordinates into a human-readable address. We're going to spend more time in the next lesson talking about how we want to use the API and what our proposed solution would be. But in this lesson, it will come up with a very brief explanation. We're going to use the geocoding approach, where users will provide an address, and the API will respond with more information about the address, which will include its latitude and longitude. Here's an example response that Google shows us in their documentation here that we'll link in the manuscript below. They've provided an address of 1600 amphitheater Parkway Mountain View, California. And this is the sample geocoding response. There is an address components array within the result that contains specific information about the street number, the route, amphitheater Parkway, the locality, which refers to the city or political entity, and then there's information being returned that hasn't really been provided in the input. Administrative area is the term used to convey the entities below the country level. One is the state, and two is the county within the context of the United States . We'll talk more about this in the next lesson, but we're getting information here that it knows this particular address is in the Santa Clara County. It's in California. It's in the United States, and this is the postal code. There's also more information being returned, such as a more formatted address, the latitude and longitude. However, for our solution in our use case, we'll be using the address components array in particular. For when a user searches for an address, we'll pull three things from the address components. We'll pull the city, which is for the most part comes from the locality. We'll pull the admin, or the most administrative area level one, and the country. Our listing documents have these three fields. They have a city field, an admin field, and a country field. And when we make our query for listings, we'll say that we'll want to find the listing documents with which these three fields match that to what we found from the API. We're going to spend more time talking about this in the next lesson, but for now, let's look to simply just enable this geocoding API. To use the geocoding API, we'll have to activate it from our Google Developer Console. The API section of the console can be accessed at console.developers.google.com /apis. The first thing we'll do is we'll click Enable APIs and Services. We'll search for the geocoding API, and when we find it, we'll click Enable. Then we'll head over to the credentials tab of this particular API, and then we'll try to create a new credential with the credentials and APIs and services links here. This takes us to the credentials section of our APIs in our console. We'll create a new API key. We'll restrict this API key so that it can only be used for the geocoding API. Here, we can rename our API key to something more meaningful. We'll name it geocoding API, so we'll know what this particular key is being used for. We can keep the application restriction as a nun. This will ensure if in the future we want to expand our app to the iOS or Google Play Store, this API key will still work. We do, however, want to restrict the key to be for the geocoding API only. Perfect. Now we have our geocode API key available to us. Since we'll need this API key in our application when we are to make our requests, we'll save it as an environment variable in our server application. So in the .n file of our server project, we'll add a new variable called ggeoc ode key, and we'll provide the value we've obtained from our developer console. As a quick note, before we close, I believe before you can start using the Google Maps platform APIs and SDKs, you might have to create a billing account with your payment information. This is documented and mentioned in the get started with Google Maps platform documentation that we'll share in the lesson manuscript, or we'll share a link of in the lesson manuscript. To add billing information, you'll need to head over to the billing route or tab of your developer console, with which you can provide your information. In this particular account that we have here, I've already provided some of my payment information. And by all means, I do encourage you to provide your billing information, even though I might have been reluctant to at first. At this moment, Google does provide a pretty good free trial credit for up to a year, I believe, where you won't be charged anything whatsoever. In addition, if you're building this locally and for development purposes, it's unlikely your API keys are going to be used by a lot of people unless you share it with them. And last but not least, I believe the geocoding API has some pretty good quotas . If you look at the quotas section of this particular API, it does seem to say that geocoding is mostly unlimited availability. However, there are limitations for the number of requests that can be made per minute or per 100 seconds, which is again unlikely to be hit unless your app is being used by a large, large number of people. With our API key now available, in the next coming lessons, we'll talk about our solution, as well as how we're going to update our GraphQL fields and resolvers so that we can return listings to the user based on an address that the user may type, or in other words, the location that the user may provide. human being. That's all for today's session.