Eseguire la migrazione ai nuovi dettagli dei luoghi

Sviluppatori dello Spazio economico europeo (SEE)

L'API Places può restituire informazioni dettagliate su un luogo specifico. Questa pagina spiega le differenze tra i dettagli del luogo utilizzati nella classe Place (nuova) e PlacesService (legacy) e fornisce alcuni snippet di codice per il confronto. La seguente tabella elenca alcune delle principali differenze nell'utilizzo dei dettagli del luogo tra la classe Place e PlacesService:

PlacesService (legacy) Place (nuovo)
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
I metodi richiedono l'utilizzo di un callback per gestire l'oggetto dei risultati e la risposta google.maps.places.PlacesServiceStatus. Utilizza le promesse e funziona in modo asincrono.
I metodi richiedono un controllo PlacesServiceStatus. Nessun controllo dello stato richiesto, è possibile utilizzare la gestione degli errori standard. Ulteriori informazioni.
I campi di dati del luogo sono formattati utilizzando la notazione snake case. I campi di dati del luogo sono formattati utilizzando la notazione camel case.
Limitato a un insieme fisso di tipi di luoghi e campi di dati sui luoghi. Fornisce una selezione più ampia di tipi di luoghi e campi di dati dei luoghi aggiornati regolarmente.

Confronto del codice

Questa sezione confronta due frammenti di codice simili per illustrare le differenze tra il servizio Places e la classe Place. Gli snippet di codice mostrano il codice richiesto su ogni API rispettiva per effettuare una richiesta di dettagli del luogo, quindi utilizzano i dati del luogo risultanti per aggiungere un indicatore alla mappa.

Servizio Places (legacy)

Il seguente snippet di codice compresso mostra l'esecuzione di una richiesta di dettagli del luogo utilizzando PlacesService. La richiesta utilizza un callback e include un controllo condizionale obbligatorio su PlacesServiceStatus. I campi di dati del luogo necessari sono specificati nel corpo della richiesta.

function getPlaceDetails() {
  // Instantiate the Places Service.
  const service = new google.maps.places.PlacesService(map);

  // Make a request using the Place ID.
  const request = {
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    fields: ["name", "formatted_address", "place_id", "geometry"],
  };

  // Request place details.
  service.getDetails(request, (place, status) => {
    // Check whether PlacesServiceStatus is OK.
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {

      // Log the result.
      console.log(place.name);
      console.log(place.formatted_address);

      // Add a marker for the place.
      const marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
        title: place.name,
      });
    }
  });
}

Scopri di più

Place class (New)

Il seguente snippet di codice compresso mostra come effettuare una richiesta di dettagli del luogo utilizzando la classe Place. La richiesta è asincrona e non include un controllo dello stato (è possibile utilizzare la gestione degli errori standard). Un ID luogo viene utilizzato per creare una nuova istanza di Place, che viene utilizzata per effettuare la richiesta (fetchFields()). I campi dei dati del luogo necessari non vengono passati finché non viene chiamato fetchFields(), il che offre maggiore flessibilità. Poiché il metodo fetchFields() utilizza l'operatore await, può essere utilizzato solo all'interno di una funzione async.

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the needed 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 google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

Scopri di più