Introducing Places UI Kit: A ready-to-use, low-cost component library that lets you bring the familiar Google Maps UI for Places to any map of your choice. Try it out, andshare your input to help shape the future of GMP!

Libraries

To load the JavaScript code for the Maps JavaScript API, you include abootstrap loader script on your page, of the following form:

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

The Maps JavaScript API is made up oflibraries that are not loaded until you specifically request them. Breaking up components into libraries allows the API to load (and parse) quickly. You only incur the additional overhead of loading and parsing libraries as you need them.

Load additional libraries at runtime, by using theawait operator to callimportLibrary() from within anasync function. For example:

const{Map}=awaitgoogle.maps.importLibrary("maps");

The following code example shows loading both theMap andAdvancedMarkerElement libraries:

TypeScript

// Initialize and add the mapletmap;asyncfunctioninitMap():Promise<void>{// The location of Uluruconstposition={lat:-25.344,lng:131.031};// Request needed libraries.//@ts-ignoreconst{Map}=awaitgoogle.maps.importLibrary("maps")asgoogle.maps.MapsLibrary;const{AdvancedMarkerElement}=awaitgoogle.maps.importLibrary("marker")asgoogle.maps.MarkerLibrary;// The map, centered at Ulurumap=newMap(document.getElementById('map')asHTMLElement,{zoom:4,center:position,mapId:'DEMO_MAP_ID',});// The marker, positioned at Uluruconstmarker=newAdvancedMarkerElement({map:map,position:position,title:'Uluru'});}initMap();
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

// Initialize and add the mapletmap;asyncfunctioninitMap(){// The location of Uluruconstposition={lat:-25.344,lng:131.031};// Request needed libraries.//@ts-ignoreconst{Map}=awaitgoogle.maps.importLibrary("maps");const{AdvancedMarkerElement}=awaitgoogle.maps.importLibrary("marker");// The map, centered at Ulurumap=newMap(document.getElementById("map"),{zoom:4,center:position,mapId:"DEMO_MAP_ID",});// The marker, positioned at Uluruconstmarker=newAdvancedMarkerElement({map:map,position:position,title:"Uluru",});}initMap();

Available Libraries

The following libraries are available for use withdynamic library import anddirect script loading tag:

The following bootstrap request illustrates how to add a request for thegoogle.maps.geometry library of the Maps JavaScript API, to the direct script loading tag:

<script async    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry&callback=initMap"></script>

To request multiple libraries, separate them with a comma:

<script async    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry,places&callback=initMap"></script>

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-07-18 UTC.