Place Details

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,
    });
}
index.ts

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,
  });
}

index.js

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.

Immagine che mostra le varianti di dimensioni x-small, small, medium, large e x-large del componente Panoramica dei luoghi mostrate in base al campo delle dimensioni inserito dall'utente.
Figura 1: informazioni sui dettagli del luogo con cinque diverse varianti di dimensioni

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.