Campi di recupero
Se disponi già di un oggetto Place
o di un ID luogo, utilizza il metodo Place.fetchFields
per ottenere i dettagli sul luogo. Fornisci un elenco separato da virgole di campi di dati dei luoghi da restituire; specifica i nomi dei campi con lettere maiuscole e minuscole. Utilizza l'oggetto Place
restituito per ottenere 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 luogo
Nota:questo esempio utilizza una libreria open source. Consulta la pagina README per ricevere assistenza e feedback relativi alla libreria.
Mostra i dettagli dei luoghi con poche righe di codice utilizzando i componenti web.
Cosa sono i componenti web?
I componenti web ti consentono di creare tag HTML incapsulati personalizzati, riutilizzabili e utilizzabili ovunque nel codice HTML della tua app web. Sono supportati in tutti i browser moderni ed espongono un meccanismo indipendente dal framework per l'incapsulamento di UI e funzionalità.
Che cos'è il componente Panoramica luogo?
Il componente Panoramica dei luoghi mostra informazioni dettagliate su milioni di attività, inclusi orari di apertura, recensioni con stelle e foto, oltre a indicazioni stradali e altre azioni in un'interfaccia utente predefinita in cinque dimensioni e formati.
Che cos'è la libreria di componenti estesi?
La libreria di componenti estesa di Google Maps Platform è un insieme di componenti web che aiuta gli sviluppatori a creare mappe e funzionalità di localizzazione migliori più velocemente e con meno sforzo. Incapsula codice boilerplate, best practice e design reattivo, riducendo le interfacce complesse delle mappe in un unico elemento HTML. In definitiva, questi componenti semplificano la lettura, l'apprendimento, la personalizzazione e la gestione delle mappe e del codice relativo alla località.
Inizia
Per iniziare, carica la libreria dei componenti estesi con npm.
Per un rendimento ottimale, utilizza un gestore di pacchetti e importa solo i componenti necessari. Questo pacchetto è elencato in 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, richiedi 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 Panoramica del luogo con un ID luogo a tua scelta. Questo è il segnaposto per un ufficio Google a Auckland.
<gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"></gmpx-place-overview>
Esistono cinque varianti di dimensioni del componente Place Panoramica. Il componente predefinito utilizza una variante delle dimensioni x-large
. Per avere 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, visita GitHub o npm. Per visualizzare i componenti utilizzati nel codice campione, consulta la pagina degli esempi su GitHub.