Google Maps API Tutorials (JavaScript)

Maps API Display / Show Map

Last modified on March 20th, 2022
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:

  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

Hey, Like what you're reading? Check this out!

🔥 9,134+ students already enrolled!
4.6 ⭐️⭐️⭐️⭐️⭐️ (145+ ratings) BEST SELLER