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

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.

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. Fa parte della libreria di componenti estesi, di Google Maps Platform, un insieme di componenti web che aiuta gli sviluppatori a creare mappe migliori e funzionalità di localizzazione più velocemente.

Configuratore Place Panoramica

Utilizza il configuratore per creare un componente Panoramica luogo personalizzato e generare il codice da aggiungere a una pagina web.

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.