Check-in 6

19 March 2019

For this check-in, I want to make sure you have an API key for Google Maps. You will need a Google account of some sort – your my.liu.edu may be fine.

Steps

  1. Use your Google account to log to the developer console.
  2. Select the drop-down in the upper left (mine already says cs120), and then look for a New Project option.

    google-apis-dropdown.png

    google-apis-new-project.png

  3. Specify whatever project name you want, but it might be helpful for you later if it includes cs120 and maybe s19. Leave the Location or organization as the default.
  4. Wait a few moments for the dashboard to update. You’ll see an acknowledgment like this when it is finished.

    google-api-created.png

  5. Select the new project name in the drop-down.

    google-apis-dropdown.png

  6. Click the Enable APIs button in the top center.

    google-apis-enable.png

  7. Choose the Maps Javascript API.

    google-maps-js-api.png

  8. Click the big blue Enable button.

    google-maps-enable.png

  9. On the next screen, select the Credentials tab.

    maps-credentials-tab.png

  10. Click Create credentials » API key. The copy the key and paste it into a safe place.

    maps-your-api-key.png

  11. Then hit Close. In the future, it’s a good idea to restrict where and how the key can be used. But when we’re first getting things moving, I prefer to keep it unrestricted.
  12. In your repository, create a tiny file called gmaps-key.html, containing this code: 
    <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

    But paste in your API key where it says YOUR_API_KEY.

  13. Load that file in the browser, open the developer’s console.
  14. If something is wrong, then within 15–20 seconds you should see an error like this:

    gmaps-js-error.png

    Try to fix it! If you don’t see the error, then your key and the way you specified it is good.

  15. Stage, commit and push as usual.