PlaceListElement est un élément HTML qui affiche les résultats d'une recherche de lieu dans une liste. Il existe deux façons de configurer l'élément gmp-place-list:
- Recherche par requête textuelle pour configurer le widget afin d'afficher les résultats de recherche à partir d'une recherche textuelle Places.
- Requête de recherche à proximité pour configurer le widget afin qu'il affiche les résultats de recherche à partir d'une requête Nearby Search de Places.
Requête de recherche par texte
L'exemple suivant affiche l'élément de liste de lieux en réponse à une recherche textuelle de l'utilisateur. Lorsqu'un résultat est sélectionné, une fenêtre d'informations affichant les détails du lieu sélectionné s'affiche. Pour ajouter l'élément "Liste de lieux" à la carte, ajoutez un élément gmp-place-list à la page HTML, comme indiqué dans l'extrait suivant:
<gmp-map center="-37.813,144.963" zoom="2" map-id="DEMO_MAP_ID">
<div class="overlay" slot="control-inline-start-block-start">
<div class="controls">
<input type="text" class="query-input" />
<button class="search-button">Search</button>
</div>
<div class="list-container">
<gmp-place-list selectable></gmp-place-list>
</div>
</div>
<gmp-place-details size="large"></gmp-place-details>
</gmp-map>
Plusieurs appels querySelector sont utilisés pour sélectionner les éléments de la page à interagir:
const map = document.querySelector('gmp-map');
const placeList = document.querySelector('gmp-place-list');
const queryInput = document.querySelector('.query-input');
const searchButton = document.querySelector('.search-button');
const placeDetails = document.querySelector('gmp-place-details');
Lorsque l'utilisateur clique sur le bouton de recherche,
configureFromSearchByTextRequest est appelé et l'élément "Liste des lieux" affiche les résultats (des repères sont ajoutés dans la fonction d'assistance addMarkers). L'extrait de code suivant montre le code permettant de gérer les événements de clic:
searchButton.addEventListener('click', () => {
for (marker in markers) {
markers[marker].map = null;
}
markers = {};
if (queryInput.value) {
placeList
.configureFromSearchByTextRequest({
textQuery: queryInput.value,
locationBias: map.innerMap.getBounds()
})
.then(addMarkers);
}
});
Voir l'exemple de code complet
L'exemple suivant utilise le composant d'UI de liste de lieux pour afficher des lieux en fonction d'une recherche de texte à l'aide de
configureFromSearchByTextRequest, et ajoute des repères cliquables à la carte pour afficher les informations sur le lieu lors de la sélection.
JavaScript
const map = document.querySelector('gmp-map');
const placeList = document.querySelector('gmp-place-list');
const queryInput = document.querySelector('.query-input');
const searchButton = document.querySelector('.search-button');
const placeDetails = document.querySelector('gmp-place-details');
let markers = {};
let infowindow = {};
async function init() {
await google.maps.importLibrary('places');
const {
InfoWindow
} = await google.maps.importLibrary('maps');
infowindow = new InfoWindow();
// Call geolocation helper function to center map.
findCurrentLocation();
map.innerMap.setOptions({
mapTypeControl: false,
clickableIcons: false,
});
// Handle click on search button.
searchButton.addEventListener('click', () => {
for (marker in markers) {
markers[marker].map = null;
}
markers = {};
if (queryInput.value) {
placeList
.configureFromSearchByTextRequest({
textQuery: queryInput.value,
locationBias: map.innerMap.getBounds()
})
.then(addMarkers);
}
});
// Handle the user's selection on the Place List.
placeList.addEventListener('gmp-placeselect', ({
place
}) => {
markers[place.id].click();
});
}
// Helper function to add markers.
async function addMarkers() {
const {
AdvancedMarkerElement
} = await google.maps.importLibrary('marker');
const {
LatLngBounds
} = await google.maps.importLibrary('core');
const bounds = new LatLngBounds();
if (placeList.places.length > 0) {
placeList.places.forEach((place) => {
let marker = new AdvancedMarkerElement({
map: map.innerMap,
position: place.location
});
marker.metadata = {
id: place.id
};
markers[place.id] = marker;
bounds.extend(place.location);
marker.addListener('click', (event) => {
if (infowindow.isOpen) {
infowindow.close();
}
placeDetails.configureFromPlace(place);
placeDetails.style.width = '350px';
infowindow.setOptions({
content: placeDetails
});
infowindow.open({
anchor: marker,
map: map.innerMap
});
placeDetails.addEventListener('gmp-load', () => {
map.innerMap.fitBounds(
place.viewport, {
top: placeDetails.offsetHeight || 206,
left: 200
});
});
});
map.innerMap.setCenter(bounds.getCenter());
map.innerMap.fitBounds(bounds);
});
}
}
// Helper function to center map on current device location.
async function findCurrentLocation() {
const {
LatLng
} = await google.maps.importLibrary('core');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const pos =
new LatLng(position.coords.latitude, position.coords.longitude);
map.innerMap.panTo(pos);
map.innerMap.setZoom(16);
},
() => {
console.log('The Geolocation service failed.');
map.innerMap.setZoom(16);
},
);
} else {
console.log('Your browser doesn\'t support geolocation');
map.innerMap.setZoom(16);
}
}
init();
CSS
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 16px;
text-align: center;
}
gmp-map {
box-sizing: border-box;
padding: 0 20px 20px;
}
.overlay {
margin: 20px;
width: 400px;
}
.controls {
display: flex;
gap: 10px;
margin-bottom: 10px;
height: 32px;
}
.search-button {
background-color: #5491f5;
color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
width: 100px;
}
.query-input {
border: 1px solid #ccc;
border-radius: 5px;
flex-grow: 1;
padding: 10px;
}
.list-container {
height: 600px;
overflow: auto;
border-radius: 10px;
}
gmp-place-list {
background-color: #fff;
}
gmp-place-details {
width: 320px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Place List Text Search with Google Maps</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Place List Text Search with Google Maps</h1>
<gmp-map center="-37.813,144.963" zoom="2" map-id="DEMO_MAP_ID">
<div class="overlay" slot="control-inline-start-block-start">
<div class="controls">
<input type="text" class="query-input" />
<button class="search-button">Search</button>
</div>
<div class="list-container">
<gmp-place-list selectable></gmp-place-list>
</div>
</div>
<gmp-place-details size="large"></gmp-place-details>
</gmp-map>
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)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: "alpha"
});
</script>
</body>
</html>
Requête de recherche à proximité
L'exemple suivant affiche l'élément de liste de lieux en réponse à une recherche à proximité. Pour simplifier, seuls trois types de lieux sont listés : café, restaurant et borne de recharge de VE. Lorsqu'un résultat est sélectionné, une fenêtre d'informations affichant les détails du lieu sélectionné s'affiche. Pour ajouter l'élément "Liste de lieux" à la carte, ajoutez un élément gmp-place-list à la page HTML, comme indiqué dans l'extrait suivant:
<gmp-map center="-37.813,144.963" zoom="10" map-id="DEMO_MAP_ID">
<div class="overlay" slot="control-inline-start-block-start">
<div class="controls">
<select name="types" class="type-select">
<option value="">Select a place type</option>
<option value="cafe">Cafe</option>
<option value="restaurant">Restaurant</option>
<option value="electric_vehicle_charging_station">
EV charging station
</option>
</select>
<button class="search-button">Search</button>
</div>
<div class="list-container">
<gmp-place-list selectable></gmp-place-list>
</div>
</div>
<gmp-place-details size="large"></gmp-place-details>
</gmp-map>
Plusieurs appels querySelector sont utilisés pour sélectionner les éléments de la page à interagir:
const map = document.querySelector("gmp-map");
const placeList = document.querySelector('gmp-place-list');
const typeSelect = document.querySelector('.type-select');
const searchButton = document.querySelector('.search-button');
const placeDetails = document.querySelector('gmp-place-details');
Lorsque l'utilisateur clique sur le bouton de recherche,
configureFromSearchNearbyRequest est appelé et l'élément "Liste des lieux" affiche les résultats (des repères sont ajoutés dans la fonction d'assistance addMarkers). L'extrait de code suivant montre également le code permettant de gérer les événements de clic sur la liste des lieux à l'aide de l'événement gmp-placeselect:
searchButton.addEventListener('click', () => {
for (marker in markers) {
markers[marker].map = null;
}
markers = {};
if (typeSelect.value) {
placeList
.configureFromSearchNearbyRequest({
locationRestriction: getContainingCircle(map.innerMap.getBounds()),
includedPrimaryTypes: [typeSelect.value],
})
.then(addMarkers);
placeList.addEventListener('gmp-placeselect', ({place}) => {
markers[place.id].click();
});
}
});
Voir l'exemple de code complet
L'exemple suivant utilise le composant d'interface utilisateur de la liste des lieux pour afficher des lieux à partir d'une recherche à proximité à l'aide de
configureFromSearchNearbyRequest, et ajoute des repères cliquables à la carte pour afficher les informations sur le lieu lors de la sélection.
JavaScript
const map = document.querySelector("gmp-map");
const placeList = document.querySelector("gmp-place-list");
const typeSelect = document.querySelector(".type-select");
const searchButton = document.querySelector(".search-button");
const placeDetails = document.querySelector("gmp-place-details");
let markers = {};
let infowindow = {};
let mapCenter;
async function init() {
await google.maps.importLibrary("places");
const {InfoWindow} = await google.maps.importLibrary("maps");
const { spherical } = await google.maps.importLibrary("geometry");
infowindow = new InfoWindow();
function getContainingCircle(bounds) {
const diameter = spherical.computeDistanceBetween(
bounds.getNorthEast(),
bounds.getSouthWest()
);
return { center: bounds.getCenter(), radius: diameter / 2 };
}
findCurrentLocation();
map.innerMap.setOptions({
mapTypeControl: false,
clickableIcons: false,
});
searchButton.addEventListener("click", () => {
for(marker in markers){
markers[marker].map = null;
}
markers = {};
if (typeSelect.value) {
placeList.configureFromSearchNearbyRequest({
locationRestriction: getContainingCircle(
map.innerMap.getBounds()
),
includedPrimaryTypes: [typeSelect.value],
}).then(addMarkers);
placeList.addEventListener("gmp-placeselect", ({ place }) => {
markers[place.id].click();
});
}
});
}
async function addMarkers(){
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
const { LatLngBounds } = await google.maps.importLibrary("core");
const bounds = new LatLngBounds();
if(placeList.places.length > 0){
placeList.places.forEach((place) => {
let marker = new AdvancedMarkerElement({
map: map.innerMap,
position: place.location
});
marker.metadata = {id: place.id};
markers[place.id] = marker;
bounds.extend(place.location);
// pinMarkers.push(marker);
marker.addListener('click',(event) => {
if(infowindow.isOpen){
infowindow.close();
}
placeDetails.configureFromPlace(place);
placeDetails.style.width = "350px";
infowindow.setOptions({
content: placeDetails
});
infowindow.open({
anchor: marker,
map: map.innerMap
});
placeDetails.addEventListener('gmp-load',() => {
map.innerMap.fitBounds(place.viewport, {top: placeDetails.offsetHeight || 206, left: 200});
});
});
map.innerMap.setCenter(bounds.getCenter());
map.innerMap.fitBounds(bounds);
});
}
}
async function findCurrentLocation(){
const { LatLng } = await google.maps.importLibrary("core")
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const pos = new LatLng(position.coords.latitude,position.coords.longitude);
map.innerMap.panTo(pos);
map.innerMap.setZoom(14);
},
() => {
console.log('The Geolocation service failed.');
map.innerMap.setZoom(14);
},
);
} else {
console.log("Your browser doesn't support geolocation");
map.innerMap.setZoom(14);
}
}
init();
CSS
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 16px;
text-align: center;
}
gmp-map {
box-sizing: border-box;
padding: 0 20px 20px;
}
.overlay {
margin: 20px;
width: 400px;
}
.controls {
display: flex;
gap: 10px;
margin-bottom: 10px;
height: 32px;
}
.search-button {
background-color: #5491f5;
color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
width: 100px;
}
.type-select {
border: 1px solid #ccc;
border-radius: 5px;
flex-grow: 1;
padding: 0 10px;
}
.list-container {
height: 600px;
overflow: auto;
border-radius: 10px;
}
gmp-place-list {
background-color: #fff;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Place List Nearby Search with Google Maps</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Place List Nearby Search with Google Maps</h1>
<gmp-map center="-37.813,144.963" zoom="10" map-id="DEMO_MAP_ID">
<div class="overlay" slot="control-inline-start-block-start">
<div class="controls">
<select name="types" class="type-select">
<option value="">Select a place type</option>
<option value="cafe">Cafe</option>
<option value="restaurant">Restaurant</option>
<option value="electric_vehicle_charging_station">
EV charging station
</option>
</select>
<button class="search-button">Search</button>
</div>
<div class="list-container">
<gmp-place-list selectable></gmp-place-list>
</div>
</div>
<gmp-place-details size="large"></gmp-place-details>
</gmp-map>
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)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: "alpha"
});
</script>
</body>
</html>