API Key

There is one final step that needs to be added to the HTML page: an API key for GoogleMaps. This module will walk you through getting that key.

Getting an API key

GoogleMaps is an API provided by Google. There are many different APIs that Google offers, so if you're interested, feel free to play around with some of those later.

If you haven't already, log into your Google Firebase account and create a project. The name doesn't matter; we're just using this project for the API Keys.
Go to the Google Developer Console
Select your project from the list, then click `+ENABLE APIS AND SERVICES".
Search for Maps, then click on Google Maps Javascript API.
Click Enable.
In the side menu, click credentials, then click Create Credentials and select API Key.
Copy your API key and paste it in the apikeys.txt file.

Add the following lines to the end of the body of the googlemaps.html file. Replace INSERT-YOUR-API-KEY-HERE with your key:

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=INSERT-YOUR-API-KEY-HERE"></script>
<script type="text/javascript" src="googlemaps.js"></script>

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <link href="googlemaps.css" rel="stylesheet">
 <title>Google Maps API</title>
</head>
<body>
 <h1>Maps Example</h1>
 <div id="map_canvas"></div>
 <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=INSERT-YOUR-API-KEY-HERE"></script>
 <script type="text/javascript" src="googlemaps.js"></script>
</body>
</html>

IMPORTANT MAKE SURE YOU ADDED THE apikeys.txt FILE TO YOUR .gitignore! If you don't, all your API keys will be published to GitHub for anyone to use. Anytime you are using something for authentication or encryption purposes, make sure it's not accidentally pushed to GitHub.

Commit your work here as "GoogleMaps - API Key added".

This adds both the API Key and your googlemaps.js file to the html file. Next, we'll work on the JavaScript file.

PreviousHTML and CSS files NextJS Setup

Last updated 7 years ago