Add a Google Map to a Web Page
AI-generated Key Takeaways
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 standarddivelement, 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 programmaticallyaccess the map instance.
- Add a map using a
gmp-mapelement - Add a map using a
divelement and JavaScript - Set and get properties on the map instance
Overview
To load a map, your web page must do the following things:
- Load the Maps JavaScript APIusing a bootstrap loader. This is where your API key is passed. It can be addedto either the HTML or JavaScript source files.
- Add the map to the HTML page, and add the needed CSS styles.
- Load the
mapslibrary and initialize the map.
Add a map using agmp-map element
Thegmp-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 webpage using agmp-map element, take the following steps.
Add a
scriptelement containing the bootstrap to an HTML page, or add itto a JavaScript or TypeScript source file without thescriptelement.Configure the bootstrap with your API key and any other options. You can chooseeither dynamic library import or direct script loading. This example showsadding the direct script loading bootstrap to an HTML page:<scriptsrc="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"defer></script>
On the HTML page, add a
gmp-mapelement. Specify latitude and longitudecoordinates forcenter(required), a zoom value forzoom(required),and amap-idif needed (it is required for some features like AdvancedMarkers). The CSSheightattribute is required for the map to be visible. Itcan be specified in either the HTML or CSS. In this example theheightstyleattribute is specified in the HTML for simplicity.<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" ></gmp-map>
Complete example code
<html> <head> <title>Add a Map using HTML</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly" defer ></script> </head> <body> <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" ></gmp-map> </body></html>
Add a map using adiv element (legacy) and JavaScript
To add a map to a web page using adiv element, take the following steps.
Add a
scriptelement containing the bootstrap to an HTML page, or add itto a JavaScript or TypeScript source file without thescriptelement.Configure the bootstrap with your API key and any other options. You can chooseeither dynamic library import or direct script loading. This example showsadding the dynamic bootstrap to an HTML page:<script>(g=>{varh,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});vard=b.maps||(b.maps={}),r=newSet,e=newURLSearchParams,u=()=>h||(h=newPromise(async(f,n)=>{await(a=m.createElement("script"));e.set("libraries",[...r]+"");for(king)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 theversion to use (weekly, beta, alpha, etc.).// Add otherbootstrap parameters as needed, using camel case.});</script>
On the HTML page, add a
divelement to contain the map.<divid="map"></div>
In the CSS, set the map height to 100%. The CSS
heightattribute isrequired for the map to be visible.#map{height:100%;}
In the JavaScript file, create a function to load the
mapslibrary andinitialize the map. Specify latitude and longitude coordinates forcenter, andthe zoom level to use forzoom. If needed, add a map ID using themap-idproperty.letmap;asyncfunctioninitMap(){const{Map}=awaitgoogle.maps.importLibrary("maps");map=newMap(document.getElementById("map"),{center:{lat:-34.397,lng:150.644},zoom:8,});}initMap();
Complete example code
TypeScript
letmap:google.maps.Map;asyncfunctioninitMap():Promise<void>{const{Map}=awaitgoogle.maps.importLibrary("maps")asgoogle.maps.MapsLibrary;map=newMap(document.getElementById("map")asHTMLElement,{center:{lat:-34.397,lng:150.644},zoom:8,});}initMap();
JavaScript
letmap;asyncfunctioninitMap(){const{Map}=awaitgoogle.maps.importLibrary("maps");map=newMap(document.getElementById("map"),{center:{lat:-34.397,lng:150.644},zoom:8,});}initMap();
CSS
/* * 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;}
HTML
<html> <head> <title>Simple Map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div></div> <!-- prettier-ignore --> <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script> </body></html>Try Sample
Set and get properties on the map instance
To interact with the map instance, select the containing element. The code to dothis will vary depending on whether you used thegmp-map element or adivelement.
Get a map instance from agmp-map element
To get the map instance when using agmp-map element, usedocument.querySelector to retrieve amapElementinstance, as shown here.
constmapElement=document.querySelector('gmp-map')asgoogle.maps.MapElement;Then set properties on themapElement instance:
mapElement.zoom=8;TheMapElement class uses theMap class internally; access theMap classusing theMapElement.innerMap property, as shown here:
mapElement.innerMap.setOptions({mapTypeControl:false,});Get a map instance from adiv element
When using adiv element, get the map instance and set options atinitialization time:
map=newgoogle.maps.Map(document.getElementById("map"),{center:{lat:-34.397,lng:150.644},zoom:8,mapTypeControl:false,});After initialization, set options on themap instance as shown here:
map.setOptions({zoom:8,});Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-11-21 UTC.