Campi di recupero
Se disponi già di un oggetto o un ID luogo Place
, utilizza il metodo Place.fetchFields
per visualizzare i dettagli sul luogo. Fornisci un elenco separato da virgole di
campi dati relativi ai luoghi da restituire;
specifica i nomi dei campi in caratteri a cammello. Utilizza l'oggetto Place
restituito per ottenere i dati per i
campi richiesti.
L'esempio seguente utilizza un ID luogo per creare un nuovo Place
, chiama Place.fetchFields
richiedendo i campi displayName
e formattedAddress
, aggiunge un indicatore alla mappa e registra alcuni dati nella console.
TypeScript
async function getPlaceDetails(Place) { const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', requestedLanguage: 'en', // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); // Log the result console.log(place.displayName); console.log(place.formattedAddress); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); }
JavaScript
async function getPlaceDetails(Place) { const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // Use place ID to create a new Place instance. const place = new Place({ id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg", requestedLanguage: "en", // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); // Log the result console.log(place.displayName); console.log(place.formattedAddress); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); }
Utilizzare il componente Panoramica del luogo
Nota: questo esempio utilizza una libreria open source. Consulta la pagina README per assistenza e feedback relativi alla libreria.
Il componente Panoramica del luogo mostra informazioni dettagliate su milioni di attività, compresi orari di apertura, recensioni a stelle e foto, oltre a indicazioni stradali e altre azioni in un'interfaccia utente predefinita in 5 dimensioni e formati. Fa parte della libreria dei componenti estesi di Google Maps Platform, un insieme di componenti web che aiuta gli sviluppatori a creare più velocemente mappe e funzionalità di geolocalizzazione migliori.
Strumento di configurazione Panoramica dei luoghi
Utilizza il configuratore per creare un codice incorporabile per un componente Place Overview personalizzato, quindi esportalo in modo da utilizzarlo con i framework più diffusi come React e Angular o nessun framework.
Inizia
Per iniziare, carica la libreria dei componenti estesi con npm.
Per ottenere le migliori prestazioni, utilizza un gestore di pacchetti e importa solo i componenti necessari. Questo pacchetto è elencato su npm come @googlemaps/extended-component-library. Installalo con:
npm i @googlemaps/extended-component-library;
Quindi importa tutti i componenti che utilizzi nell'applicazione.
import '@googlemaps/extended-component-library/place_overview.js';
Dopo aver caricato la libreria npm, ottieni una chiave API dalla console Cloud.
<gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placeoverview_v1"></gmpx-api-loader>
Utilizza il tag del componente Place Overview con un ID luogo a tua scelta. Questo è un segnaposto per un ufficio Google ad Auckland.
<gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"></gmpx-place-overview>
Esistono cinque varianti di dimensioni del componente Panoramica del luogo. Il componente predefinito utilizza una variante delle dimensioni x-large
. Per ottenere altre varianti di taglia, aggiungi e modifica l'attributo size
.
<!-- Try setting the size attribute to "x-small", "small", "medium", "large", or "x-large" --> <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw" size="small"></gmpx-place-overview>
Per maggiori dettagli, consulta GitHub o npm. Per vedere i componenti utilizzati nel codice campione, consulta la pagina degli esempi su GitHub.