The 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, including customizing action buttons, configuring Place attribution, and handling errors.
Basic usage
To use the component, add a <gmp-advanced-place-list>
element to your page and pass a comma-separated list of place resource names
via the places attribute.
<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU,places/ChIJyWEHuEmuEmsRm9hTkapTCrk">
<template slot="place-list-item">
<gmp-place-name></gmp-place-name>
<gmp-place-address></gmp-place-address>
<gmp-place-media query="coffee"></gmp-place-media>
<gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
</template>
</gmp-advanced-place-list>Advanced features
Customize action buttons
Add action buttons as children inside the
<template slot="place-list-item"> element of the Advanced
Place List component. Use <gmp-place-link> for standard
navigational connections, and explicitly specify the action
attribute. You can optionally specify the slot attribute. Valid
predefined actions are open-website,
open-directions, open-map, and call. If
the slot attribute is omitted, it defaults to
action-main.
<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
<template slot="place-list-item">
<gmp-place-name></gmp-place-name>
<gmp-place-link action="open-website" target="_blank"></gmp-place-link>
<gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
</template>
</gmp-advanced-place-list>Configure Place attribution
To configure visual attribution, add a
<gmp-place-attribution> element to display overarching Maps
API data attribution configurations, such as the source of a photo or review.
It must be added as a direct sibling of the <template>.
Attributions placed inside the <template> element
will be ignored.
<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
<template slot="place-list-item">
<gmp-place-name></gmp-place-name>
</template>
<gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-list>Handle errors
You can listen for the gmp-error event to gracefully handle
scenarios when one or more requested places fail to load.
const listElement = document.querySelector('gmp-advanced-place-list'); listElement.addEventListener('gmp-error', (e) => { // e.detail.errors contains an array of failure objects with specific failed Resource Names console.error('Failed to load places: ', e.detail.errors); });