Place Details

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.

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