More than likely at some point in your career as a professional developer you’ll be asked to geocode an address. I have personally in two of my last three jobs. In fact, at my last company, I was asked to do something location-based daily.
Regardless of the company, location plays a part in many software web and mobile applications. Whether you’re checking in somewhere or trying to find your companies closest location to the user, it helps to know the basics. So, in this article, I’ll be showing you how to geocode addresses and display them on a map with Google Maps and Geocoding API, VueJs, and Firebase.
Google Geocoding API Setup
If you don’t already have a Google account (do these people even exist?) create one and head over to the Google Developer Console.
If you don’t already have a project you’d like to use, you’ll have to create a new one. In the top left, you’ll see a project dropdown.
Google Project
If you click on that dropdown, a modal will show and give you the ability to create a new project.
Google Developer Console Projects
After you’ve created your project, select it in the dropdown, and click on Library in the left menu.
Google Developer Library
Geocoding API
In the search box, search for “geocoding”, locate the Geocoding API and click on it. You’ll then be taken to a screen where you can enable it.
Geocoding API
Maps JavaScript API
Once the Geocoding API is enabled, search for the Google Maps JavaScript API. Navigate to the API page and enable it as well.
Google Maps JavaScript API
Credentials
To use these APIs, we’ll need to create an API key. To create one go to Credentials Section of the console. When you’re there, double-check you have the correct project selected and then click CREATE CREDENTIALS.
Create Credentials
After you click on the button a dropdown will appear. In the dropdown select API Key. Once the API key has been created copy it for later use.
Enable Billing
You’ll also have to enable billing to use the APIs. To do so, navigate to their instructions and follow the steps. Don’t worry about the cost as you get a $200 credit every month. Based on pricing, you’d have to geocode 40,000 requests to start accruing costs.
Pricing
If you’re super worried about it, create a budget that will shut off services after its met. I have my test account set to $1 a month before everything gets shut down. You can find more information about that here.
#vuejs #javascript #programming #firebase #software-development #api
