Google Map won’t display [closed]

I am farily new to Java Script Programming. I am learing Java Script reading from a book titled Head First HTML5 Programming. There is this step by step exercise that teaches me how to find my location and insert a google map next to my location when it is tested in any browser. However map won’t display in any browser when i test it. This book was published in 2011. Since then google has changed a few things such as requireing an API Key inorder to display the map. So I created an API key using Google Map Console.
Then Commented out the old code from the book and included the one with API_Key. Yet map won’t show in any browser.
There is also no error messages on console log view of any of the browsers. However When i type localhost/My Loction/myLoc.html I get the following message:
enter image description here
Unchechecked runtime last error:The message Port closed before a response was recieved. myLoc.html: 1
Here is the myLoc.html page:
enter image description here
This is chorm browser:
enter image description here
Neither show any error messages. Yet map wont’t display.
What I am missing here. Please help.
Thx.
Shervin