> [!NOTE] > The Advanced Place List Element is billed in the [Pro tier](https://developers.google.com/maps/documentation/javascript/usage-and-billing.md.txt#places-ui-kit). The [AdvancedPlaceListElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceListElement) is an HTML element that renders a collection of places in a list given their Place Resource Names. The Advanced Place List Element offers [advanced features](https://developers.google.com/maps/documentation/javascript/places-ui-kit/advanced-place-list.md.txt#advanced-features), including customizing action buttons, configuring Place attribution, and handling errors. ## Basic usage To use the component, add a `` element to your page and pass a space-separated list of place resource names via the `places` attribute. ### See a complete code example ### TypeScript ```typescript async function init() { await google.maps.importLibrary('places'); await customElements.whenDefined('gmp-advanced-place-list'); const listElement = document.querySelector('gmp-advanced-place-list'); if (listElement) { listElement.addEventListener('gmp-error', (e: Event) => { const customEvent = e as CustomEvent<{ errors?: unknown }>; console.error( 'Failed to load places: ', customEvent.detail.errors ?? customEvent ); }); } } void init(); ``` ### JavaScript ```javascript async function init() { await google.maps.importLibrary('places'); await customElements.whenDefined('gmp-advanced-place-list'); const listElement = document.querySelector('gmp-advanced-place-list'); if (listElement) { listElement.addEventListener('gmp-error', (e) => { const customEvent = e; console.error( 'Failed to load places: ', customEvent.detail.errors ?? customEvent ); }); } } void init(); ``` ### CSS ```css html, body { height: 100%; margin: 0; padding: 0; font-family: Roboto, Arial, sans-serif; } ``` ### HTML ```html Advanced Place List ``` ### Try Sample [JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/ui-kit-advanced-place-list/jsfiddle) ## Advanced features ### Customize action buttons Add action buttons as children inside the `