Get Started with Places UI Kit
Stay organized with collections
Save and categorize content based on your preferences.
Page Summary
-
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 the
importLibrary()function to load specific libraries likeplacesandelevationfor using elements likePlaceDetailsElement,PlaceListElement, andElevationElement.
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, see Set up your Google Cloud project.
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 the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
Next, use the await operator to call importLibrary()
from within an async function, as follows:
// Import the Places Library for PlaceDetailsElement and PlaceSearchElement const{PlaceDetailsElement,PlaceSearchElement}=awaitgoogle.maps.importLibrary('places');
Learn more about loading the Maps JavaScript API.