Google Maps API pt. 1

Creating the Google Maps API key

So I’m going to show you, in as plain a way as I can, how to engage with and use the Google Maps API key in your own app.

The first thing you’ll want to do is it go here: console.cloud.google.com

This will send you to the Google Maps Platform where you will find everything you need to start building a project that incorporates Google Maps API. The next thing you are going to want to do is to make sure you are logged into your google account (if you’re like me you probably have many of them, just pick one). This will come up later, but make sure that you have a credit card attached to the account. I know this sounds unsafe to do, but Google will NOT charge you for very light usage of the Google Maps API, which for small apps and demos is more than enough. However, if you do not have a card on file that Google can refer to, the map itself will appear with a layover that looks unsightly and makes it more difficult to interact with.

So, now that you’re on the page and all logged in, the first thing you’re going to want to do is to create a project. Next to Google Cloud Platform, which is to the top-left of the webpage, you should see your name and account with a drop down index. Click on your name and this will open up any old projects you have as well as creating a new project. Then start a new project.

Follow the steps to create you new project by naming it (always try to be as specific and intentional as possible) and where you’d like the file to be located. Then hit create! Excellent, you’ve created the project on the Google Cloud Platform.

This will send you back to the dashboard, where just as before you click on your name in the top-left of the page and then select this newly created project.

Once you are on the project page itself, go to the navigation menu, located just to the left of the Google Cloud Platform. Click on the navigation menu and go to APIs and Services, click on it and then navigate into the Library tab.

This will bring you to the (quite large) library of different API that google provides you, that you can incorporate into your project. I am going to focus on the Maps API and a few others only, but the library is truly huge, with subjects ranging from maps to machine learning and warrants exploration just on its own.

So, we’re inside the library and what we want to do now is to enable whichever APIs we would like our app to use. Narrow down the folder to just the Maps API. Maps itself has 17 different APIs that you can engage with. We won’t be needing all 17, let’s narrow it down to five.

The five APIs I’d like to engage with are: Places API, Maps Javascript API, Geocoding API, Geolocation API, and Directions API. What you will do for each of these is right click the box you find them in, open them in a new tab, and then click on ENABLE for each of them separately.

So now that we have both created our project and enabled all of the API’s that we would like to engage with our final step is to create our API key. Once again, go to the navigation bar in the top left of the screen, go into the dropdown menu and click on APIs and Services and the navigate to credentials.

This will take you to the credentials page. The first thing you want to do here is to create your credentials, which you will do by first clicking a button at the top of the page called “create credentials”. Click on it and then select API Key. If you’ve done everything right you should be able to see your newly minted API key! IT IS INCREDIBLY IMPORTANT TO NOW RESTRICT ACCESS TO YOUR API KEY AT THIS POINT.

While it is not technically necessary to do this step, it is both foolish and dangerous to not do so. All you need to do, after you have created the API Key is to click on a button on the left called Restrict Key. This will allow you to choose what types of applications can engage with the API key and to restrict the keys usage to a webpage of your choosing. So unless the user is on a webpage that you have specifically named, you can name more than one, the key will not be usable.

Don’t worry if you accidentally clicked close, you can restrict the access to your key afterwards by editing the API that you have just created.

And there you have it! Now you have an API key that will allow you to use google maps in different ways in your app!

Stay tuned for the next post where I explain how to create and use the actual functions, hooks, and components to put Google Maps API to use in your App!