Add a Google Map to a Web Page

  • This documentation explains how to embed a Google map into a webpage using HTML, CSS, and JavaScript.

  • You can add a map using a custom HTML element (gmp-map) or a standard div element, both requiring a Google Maps API key.

  • The process involves loading the Maps JavaScript API, adding the map to your HTML, and initializing it with coordinates and zoom level using JavaScript.

  • Code examples in HTML, CSS, and JavaScript (including TypeScript) are provided for both methods, demonstrating the implementation steps.

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, and then programmatically access the map instance.

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. It 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 the preferred way to add a Google map to a web page. It 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. Add a script element containing the bootstrap to an HTML page, or add it to a JavaScript or TypeScript source file without the script element. Configure the bootstrap with your API key and any other options. You can choose either dynamic library import or direct script loading. This example shows adding the dynamic script loading bootstrap to an HTML page:

    <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=