Adding Google Maps to the web page

Open the about.html file in VSCode or your text editor. It will have two paragraph <p> tags, in which you can add some information regarding your event. After that, there will be a <div> element with the ID #map, which is supposed to show the location of your event in a map.

I have asked you to generate an API key to use Google Maps before. If you haven't generated it, please get one from: https://developers.google.com/maps/documentation/javascript/get-api-key and add it to your .env file's GMAP_KEY variable. According to the Google Maps documentation, to add a Map with a marker to your web page, you must include the following script on the page:

<scriptasyncdefer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">

Here, the async and defer attributes of the <script> tag will load the script asynchronously and make sure it is executed only after the document is loaded.

Note

To know more about the workings of...