Campi di recupero
Se disponi già di un oggetto o un ID luogo Place
, utilizza Place.fetchFields
per ottenere i dettagli sul luogo. Fornisci un elenco separato da virgole di
posizionare i campi di dati da restituire;
e specificare i nomi dei campi in caratteri a cammello. Utilizza l'oggetto Place
restituito per ottenere dati per
campi richiesti.
L'esempio seguente utilizza un ID luogo per creare una nuova risorsa Place
, chiama Place.fetchFields
richiede 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 le README per ricevere assistenza e feedback relativi alla raccolta.
Il componente Panoramica del luogo mostra informazioni dettagliate su milioni di attività commerciali, tra cui orario di apertura, recensioni a stelle e foto, oltre a indicazioni stradali e altro in un'interfaccia utente predefinita in 5 dimensioni e formati. Fa parte della libreria dei componenti estesi, da Google Maps Platform, un insieme di componenti web che aiutano gli sviluppatori a creare mappe migliori più velocemente.
Strumento di configurazione Panoramica dei luoghi
Utilizza lo strumento di configurazione per creare un codice incorporabile per un componente personalizzato Panoramica del luogo, quindi esporta può essere utilizzato con framework popolari 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, ottenere 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 dimensione x-large
una variante. 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 ulteriori dettagli, consulta GitHub o npm. Per vedere i componenti utilizzati nel codice di esempio, dai un'occhiata al examples su GitHub.