Maps API Display / Show Map

Google Maps API 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:

Hey, Like what you're reading?

🔥 1,750+ students already enrolled!
4.5 ⭐️⭐️⭐️⭐️⭐️ (86+ ratings) BEST SELLER

  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.
property namedescription
zoomThe value is an integer and the larger the number, the closer the map will be.
centerThe map will be centered based on the latitude and longitude values of the center property.
mapTypeIdIt’s a type of Map which could be ROADMAP, SATELLITE, HYBRID, TERRAIN