Display Google Map On The Screen Using JavaScript

Include Google Maps API

Include Google Maps API Library with your own API Key in the index.html before the end of the body tag.

<script src="https://maps.googleapis.com/maps/api/js?key=[YOURAPIKEY]"></script>

Create A Map Element

Create a div element with an id called map, which is basically the canvas where the Gooogle Map is going to appear.

<div id="map" style="width:100%;height:500px"></div>

Instantiate Google Map Object

Instantiate the Google Maps map object after the Google Maps Library script.

<script>
   new google.maps.Map(document.getElementById("map"), {
       zoom: 15,
       center: new google.maps.LatLng(46.288896, -79.44192),
       mapTypeId: google.maps.MapTypeId.ROADMAP
    });
</script>

This takes two arguments:

[blog-in-between-card]

1. An HTML element where the map is going to appear.
2. A Javascript object that has a few properties such as zoom, center, and mapTypeId.