Place Details

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.

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

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 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.