Tried to create page with Google Map but got MissingKeyMapError

I wanted to create a GitHub page using this HTML template: https://github.com/JackDougherty/FusionTable-Map-custom-legend

The purpose of the template is to show an interactive map with a custom legend. The map itself is made with  Google Fusion Tables.

I forked the template to my GitHub and then updated the Google Fusion Table ID number so that it would display a map I created in Google Fusion tables. I then tried to published it as a GitHub page. I got a message saying, “Your site is published at https://saveyak.github.io/FusionTable-Map-custom-legend/.” When I go to the site, however, I get a message that says “This page is trying to load scripts from unauthenticated sources.” If I ignore the message then the site still doesn’t load. When I checked the Javascript Console I saw this error: “Google Maps API error: MissingKeyMapError.”

I Googled the error and saw that I needed a Google Maps API Key, but once I got the key, I didn’t know where to put it in the code. 

This is my first time making a GitHub page so I would really appreciate anyone’s help or advice!

Have you tried including the API Key in Script call?

Like this…

\<scriptasyncdefersrc="https://maps.googleapis.com/maps/api/js?key=YOUR\_API\_KEY&callback=initMap"  
&nbsp; type="text/javascript"\>\</script\>

From… https://developers.google.com/maps/documentation/javascript/get-api-key