JS-151-API
  • JavaScript Library
  • 02-DOM-Manipulation
    • Overview
    • DOM Explained
    • Example Setup
    • Selecting Elements
    • Events
    • Complete Example
  • 03-API Fundamentals
    • 0-Getting Started
      • Welcome
    • 1-Intro-To-APIs
      • Intro
      • Client
      • Requests
      • JSON
      • API Endpoints
      • Server
      • Response
      • Statelessness
      • REST
    • 2-Asynchronous-Programming
      • Intro
      • Callbacks
      • Promises
      • Promises Continued
      • Chaining Promises
    • 3-Fetch
      • Fetch Intro
      • Star Wars
        • Star Wars API
        • Star Wars Setup
        • Star Wars JS
      • Random Photo
        • Unsplash
        • Unsplash Setup
        • Unsplash JS
    • 4-Apps
      • 01-New York Times
        • 00-App Intro
        • 01-HTML/CSS/API Key
        • 02-Variables
        • 03-Event Listeners
        • 04-fetchResults
          • 01-fetchResults()
          • 02-preventDefault()
          • 03-fetch() method
          • 04-Dates
        • 05-displayResults
          • 01-Logging JSON
          • 02-Working with JSON
          • 03-Link Display
          • 04-Results Navigation
          • 05-Results Update
          • 06-Keywords
          • 07-Images
        • 06-Pagination
          • 01-Pagination Intro
          • 02-Pagination Functions
        • 07-Next Steps
      • 02-YouTube
        • html
        • youtube.css
        • youtube.js
      • 03-GoogleMaps
        • Setup
        • HTML and CSS files
        • API Key
        • JS Setup
        • Adding Your Location
        • Listeners
        • Custom Options
Powered by GitBook
On this page
  1. 03-API Fundamentals
  2. 4-Apps
  3. 03-GoogleMaps

API Key

PreviousHTML and CSS filesNextJS Setup

Last updated 7 years ago

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.

  1. 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.

  2. Go to the

  3. Select your project from the list, then click `+ENABLE APIS AND SERVICES".

  4. Search for Maps, then click on Google Maps Javascript API.

  5. Click Enable.

  6. In the side menu, click credentials, then click Create Credentials and select API Key.

  7. Copy your API key and paste it in the apikeys.txt file.

  8. 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.

Google Developer Console
Google Developer Console Home
Get Google API Credentials
GoogleMaps JS API