Add a Google Map to a Web Page

Stay organized with collections Save and categorize content based on your preferences.

You can add a Google map to a web page using HTML, CSS, and JavaScript code. This page shows how to add a map to a web page in two ways: by using the gmp-map custom HTML element, and by using a div element.

• Add a map using a gmp-map element
• Add a map using a div element and JavaScript

Overview

To load a map, your web page must do the following things:

• Load the Maps JavaScript API using a bootstrap loader. This is where your API key is passed, and can be added to either the HTML or JavaScript source files.
• Add the map to the HTML page, and add the needed CSS styles.
• Load the maps library and initialize the map.

Add a map using a gmp-map element

The gmp-map element is a custom HTML element created using web components. To add a map to a web page using a gmp-map element, take the following steps.

1. On the HTML page, add a script element containing the bootstrap configured with your API key and any other options. In the following example bootstrap, the callback parameter has been omitted, as it is not needed.

2. On the HTML page, add a gmp-map element. Specify latitude and longitude coordinates for center, and a zoom value for zoom. In this example the height style attribute is also specified.

   index.html

Complete example code

  
    

    
    
  
  
    

    
    
  
index.html

Add a map using a div element and JavaScript

To add a map to a web page using a div element, take the following steps.

1. On the HTML page, add a script element containing the bootstrap loader configured with your API key and any other options. Alternatively, add the bootstrap loader code directly to a TypeScript or JavaScript file, minus the script tags.

   <script>
     (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
       key: "YOUR_API_KEY",
       v: "weekly",
       // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
       // Add other bootstrap parameters as needed, using camel case.
     });
   </script>

2. On the HTML page, add a div element to contain the map.

   <div id="map"></div>

3. In the CSS, set the map height to 100%.

   #map {
     height: 100%;
   }

4. In the JavaScript file, create a function to load the maps library and initialize the map. Specify latitude and longitude coordinates for center, and the zoom level to use for zoom.

   let map;
   
   async function initMap() {
     const { Map } = await google.maps.importLibrary("maps");
   
     map = new Map(document.getElementById("map"), {
       center: { lat: -34.397, lng: 150.644 },
       zoom: 8,
     });
   }
   
   initMap();
   index.js

Complete example code

let map: google.maps.Map;
async function initMap(): Promise {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.ts

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

  
    

    
    
  
  
    


    
    
  
index.html