Get Started with Places UI Kit

  • To use the Places UI Kit, you must create a Cloud project, enable the Places UI Kit, and obtain an API key.

  • The Maps JavaScript API needs to be loaded using the inline bootstrap loader, including your API key and desired version.

  • Utilize theimportLibrary() function to load specific libraries likeplaces andelevation for using elements likePlaceDetailsElement,PlaceListElement, andElevationElement.

Select platform:AndroidiOSJavaScript

This page shows you how to get an API key, enable the Places UI Kit, and load the libraries that support it.

Get an API key and enable the Places UI Kit

Before using the Places UI Kit, you need to:

  • Create a Cloud project with a billing account.
  • Enable the Places UI Kit.
  • Get an API key.

To learn more, seeSet up your Google Cloud project.

Enable Places UI Kit

Get an API key

Load the required libraries

To load the libraries that support the Places UI Kit, first load the Maps JavaScript API by adding the inline bootstrap loader to your application code, as shown in the following snippet:

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

Next, use theawait operator to callimportLibrary() from within anasync function, as follows:

// Import the Places Library for PlaceDetailsElement and PlaceSearchElementconst{PlaceDetailsElement,PlaceSearchElement}=awaitgoogle.maps.importLibrary('places');

Learn more about loading the Maps JavaScript API.

Next steps

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-12-11 UTC.