Google Maps API Tutorials (JavaScript)

Display Google Map On The Screen Using JavaScript

Last modified on April 17th, 2023
Raja Tamil
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:

[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.
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 that could be ROADMAP, SATELLITE, HYBRID, TERRAIN

FREE 1-HOUR COURSE:
Vue JS & Google Maps API

ACCESS FREE COURSE NOW