Navigazione migliorata verso gli aeroporti

Gli aeroporti sono complessi di grandi dimensioni con più terminal e una navigazione precisa è fondamentale per arrivi e partenze puntuali. L'API Geocoding di Google Maps in genere restituisce una coordinata (latitudine/longitudine) che nella maggior parte dei casi è il centroide del grande complesso aeroportuale. Questa app è uno strumento interattivo progettato specificamente per aiutare gli utenti a individuare e visualizzare posizioni precise all'interno di un luogo più grande e complesso, come terminal specifici o punti di ritiro/riconsegna all'interno di un aeroporto.

Ecco come funziona:

Ricerca aeroporto/sede: gli utenti iniziano cercando una posizione principale (ad es. "Aeroporto internazionale Indira Gandhi") utilizzando l'input di completamento automatico di Google Places, che è limitato all'India.

Rilevamento delle posizioni secondarie: Una volta selezionata una posizione principale, lo script utilizza l'API Google Places per recuperare i dettagli, inclusi in modo cruciale eventuali"destinazioni secondarie" associate a quel luogo (come il Terminal 1, il Terminal 3, cancelli specifici e così via, se disponibili nei dati di Google).

Mappatura visiva: lo script utilizza l'API Geocoding per trovare le coordinate della posizione principale e delle relative destinazioni secondarie.

Mostra quindi la posizione principale e posiziona indicatori distinti e cliccabili (cerchi blu) sulla mappa per ogni sottodestinazione identificata.

Identificazione precisa: se fai clic su un indicatore di destinazione secondaria, questo viene evidenziato (diventa verde) e si apre una finestra informativa che mostra il nome e altri dettagli disponibili (come indirizzo o tipo), consentendo all'utente di confermare di aver selezionato il punto specifico corretto. Visualizzazione contestuale: la mappa regola automaticamente la visualizzazione (fitBounds) per verificare che tutti i marcatori pertinenti (posizione principale + destinazioni secondarie) siano chiaramente visibili.

API Google Maps Platform nell'app di navigazione aeroportuale

Questo documento spiega le principali API di Google Maps Platform e i relativi parametri utilizzati nell'applicazione demo "Raggiungi l'aeroporto" fornita. L'app utilizza diversi servizi per fornire la visualizzazione della mappa, la ricerca di luoghi, informazioni dettagliate sui luoghi e approfondimenti avanzati sulla posizione.

1. Inizializzazione e visualizzazione della mappa

La base dell'applicazione è la mappa interattiva.

• API utilizzata: google.maps.Map (dall'API Maps JavaScript)
• Scopo:creare e visualizzare la mappa interattiva sulla pagina web.
• Parametri chiave:
  • center: definisce il centro geografico iniziale della mappa. In questa app, inizialmente è impostato sulle coordinate di Delhi ({ lat: 28.461835685621395, lng: 77.05004035761647 }).
  • zoom: imposta il livello di zoom iniziale della mappa. DEFAULT_ZOOM_LEVEL (15) viene utilizzato per una visualizzazione ravvicinata.
  • mapId: un identificatore univoco per uno stile della mappa configurato nella console Google Cloud.

2. Ricerca e completamento automatico di luoghi

La funzionalità della barra di ricerca è basata sull'API Places.

• API utilizzata: google.maps.places.Autocomplete (dalla libreria Places dell'API Maps JavaScript)
• Scopo: fornisce il completamento del testo predittivo per le ricerche geografiche mentre l'utente digita, suggerendo luoghi pertinenti come gli aeroporti.
• Parametri chiave:
  • input: l'elemento di input HTML (#search-input) in cui l'utente digita la query.
  • componentRestrictions: filtra i risultati di ricerca in base a un paese specifico. In questo caso, { country: 'in' } limita i risultati all'India.
  • fields: specifica i campi di dati da restituire per il luogo selezionato. ['place_id'] viene utilizzato inizialmente per recuperare solo l'identificatore univoco del luogo, ottimizzando il trasferimento dei dati.
• Come utilizzare il completamento automatico

    // Initialize Autocomplete
    const autocomplete = new google.maps.places.Autocomplete(input, {
      componentRestrictions: { country: 'in' },
      fields: ['place_id'],
    });

    // Add listener to the Autocomplete
    autocomplete.addListener('place_changed', async () => {
      const place = autocomplete.getPlace();
      if (!place.place_id) {
        return;
      }
      // Once a place is selected, fetch details
      await getPlaceDetails(place.place_id);
    });

3. Recupero di informazioni dettagliate sui luoghi e gestione delle destinazioni secondarie

Una volta selezionato un luogo dai suggerimenti di completamento automatico, vengono recuperati dettagli più completi.

• API utilizzata:API Places (tramite chiamata fetch diretta a https://places.googleapis.com/v1/places/{placeId})
• Scopo:recuperare dettagli avanzati su un luogo specifico, tra cui nome visualizzato, indirizzo, tipi e, soprattutto, il relativo subDestinations (ad es. singoli terminal o aree importanti all'interno di un complesso più grande come un aeroporto).
• Parametri chiave nell'URL:
  1. {placeId}: l'identificatore univoco del luogo selezionato.
  2. fields: specifica i campi di dati esatti da recuperare. L'app richiede id, displayName, subDestinations, types e formattedAddress. Questo è fondamentale per controllare i costi e ricevere solo i dati necessari.
• Come ottenere subDestinations dato un luogo

async function getPlaceDetails(placeId) {
  // Construct the URL for the Places API (v1) details endpoint
  // The 'fields' parameter is crucial for requesting subDestinations
  const url = `https://places.googleapis.com/v1/places/${placeId}?key=YOUR_API_KEY&fields=id,displayName,subDestinations,types,formattedAddress`;

  const response = await fetch(url);
  const data = await response.json();

  // Accessing subDestinations from the Places API response
  if (data.subDestinations && data.subDestinations.length > 0) {
    for (const subDestination of data.subDestinations) {
      // Each subDestination object contains an 'id' and 'displayName'
      console.log(`Sub-destination ID: ${subDestination.id}`);
      console.log(`Sub-destination Name: ${subDestination.displayName?.text}`);
      // This subDestination.id is then used in a geocoding call (as shown in section 4)
    }
  }
}

**Handling `subDestinations`:** When the Places API returns
`subDestinations`, the application initiates a process for each one:
1.  **Geocoding:** It uses the `google.maps.Geocoder` to convert
    each `subDestination.id` into its precise geographical coordinates
    (`lat`, `lng`).
1.  **Marker Placement:** A distinct marker is added to the map for
    each sub-destination. These markers are styled with a blue circle icon
    to differentiate them.
1.  **Map Bounds Adjustment:** The `google.maps.LatLngBounds` object
    is used to dynamically expand the map's view to encompass all retrieved
    sub-destinations, verifying they are all visible within the current map
    frame.
1.  **Interactive Information Window:** A `click` listener is
    attached to each sub-destination marker. When clicked, the marker's
    icon changes to green, and an `InfoWindow` appears, displaying the
    sub-destination's name, address, and types. This provides immediate,
    detailed context to the user.

4. Geocodifica e geocodifica inversa: recupero dei dettagli per le sottodestinazioni

L'applicazione utilizza la geocodifica per due scopi principali: convertire gli ID luogo in coordinate e convertire le coordinate in dettagli sulla posizione. Questa sezione evidenzia in particolare come viene utilizzato il geocoding per ottenere informazioni dettagliate sulle destinazioni secondarie.

• API utilizzata: google.maps.Geocoder (dall'API Maps JavaScript) e API Geocoding (tramite chiamata fetch diretta a https://maps.googleapis.com/maps/api/geocode/json)
• Scopo:
  • google.maps.Geocoder: utilizzato per convertire un placeId (ottenuto da Places Autocomplete o dall'API Places) in coordinate geografiche (lat, lng) e in un viewport, consentendo alla mappa di centrare e ingrandire correttamente il luogo selezionato e le relative destinazioni secondarie.
  • API Geocoding (fetch): utilizzata per la geocodifica inversa (conversione di latitudine e longitudine in un indirizzo leggibile) e per recuperare dati sulla posizione avanzati come i contorni degli edifici e i punti di navigazione.
• Parametri chiave:
  • google.maps.Geocoder.geocode():
    • placeId: l'ID luogo da geocodificare.
    • location: l'oggetto LatLng per la geocodifica inversa.
  • Chiamata all'API Geocoding fetch:
    • latlng: le coordinate di latitudine e longitudine per il geocoding inverso.
    • extra_computations=BUILDING_AND_ENTRANCES: questo parametro fondamentale richiede dati aggiuntivi, in particolare la creazione di impronte e informazioni sull'ingresso, che vengono poi utilizzate per visualizzare i contorni degli edifici e i punti di navigazione.

Come utilizzare l'ID subDestination per recuperare ulteriori dettagli (ad es. posizione, indirizzo formattato, tipi)

function geocodeAndAddMarker(subDestination, bounds) {
  return new Promise((resolve, reject) => {
    const geocoder = new google.maps.Geocoder();
    // Using the subDestination.id to geocode and get location details
    geocoder.geocode({ placeId: subDestination.id }, (results, status) => {
      if (status === "OK" && results[0]) {
        const location = results[0].geometry.location;
        const displayName = subDestination.displayName?.text || "Sub-destination";
        const formattedAddress = results[0].formatted_address; // Further detail from Geocoding
        const types = results[0].types; // Further detail from Geocoding

        const marker = new google.maps.Marker({
          map: map,
          position: location,
          title: displayName,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'blue',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          }
        });

        marker.addListener('click', () => {
          marker.setIcon({
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'green',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          });
          const infowindow = new google.maps.InfoWindow({
            content: `<b>${displayName}</b><br><p>Address: ${formattedAddress}</p><p>Types: ${types.join(', ')}</p>`,
          });
          infowindow.open(map, marker);
        });
        bounds.extend(location);
        resolve(true);
      } else {
        reject(new Error(`Geocoding failed for placeId: ${subDestination.id}`));
      }
    });
  });
}

5. Visualizzazione degli indicatori

Gli indicatori vengono utilizzati per evidenziare posizioni specifiche sulla mappa.

• API utilizzata: google.maps.Marker (dall'API Maps JavaScript) e google.maps.marker.AdvancedMarkerElement con google.maps.marker.PinElement (dalla libreria dei marcatori dell'API Maps JavaScript)
• Scopo:
  • google.maps.Marker: utilizzato per il marcatore trascinabile iniziale (anche se draggable è impostato su false nel codice fornito, fa parte della sua funzionalità) e per i marcatori delle sottodestinazioni di base, come descritto nella sezione 3.
  • AdvancedMarkerElement e PinElement: utilizzati per i marcatori dei punti di navigazione più distinti visivamente, consentendo uno stile personalizzato del puntatore del marcatore.
• Parametri chiave:
  • position: le coordinate LatLng in cui verrà posizionato il marcatore.
  • map: l'istanza della mappa su cui verrà visualizzato il marcatore.
  • title: Testo visualizzato quando passi il mouse sopra il marcatore.
  • icon: consente icone personalizzate per google.maps.Marker (ad es. google.maps.SymbolPath.CIRCLE con colori personalizzati).
  • content: per AdvancedMarkerElement, consente di incorporare contenuti HTML personalizzati, incluso PinElement per i segnaposto predefiniti.
  • Parametri PinElement: background, borderColor, glyphColor, scale per la personalizzazione visiva.

6. Visualizzazione dei contorni degli edifici

L'applicazione può rappresentare visivamente l'impronta degli edifici.

• API utilizzata: google.maps.Data (dall'API Maps JavaScript)
• Scopo:visualizzare dati geografici, ad esempio i contorni degli edifici (restituiti come GeoJSON display_polygon dall'API Geocoding extra_computations).
• Parametri chiave:
  • map: l'istanza della mappa a cui viene applicato il livello dati.
  • style: definisce l'aspetto visivo delle funzionalità GeoJSON (ad es. strokeColor, fillColor, fillOpacity).
  • addGeoJson(): Metodo per aggiungere dati GeoJSON al livello.

7. Limiti della mappa e zoom

verificando che la visualizzazione della mappa comprenda tutte le località pertinenti.

• API utilizzata: google.maps.LatLngBounds (dall'API Maps JavaScript)
• Scopo: per regolare dinamicamente l'area visibile della mappa in modo che si adatti a una raccolta di punti geografici (ad es. il luogo principale e tutte le relative destinazioni secondarie).
• Metodi chiave:
  • extend(location): aggiunge un punto LatLng ai limiti, espandendoli se necessario.
  • fitBounds(bounds): regola il centro e il livello di zoom della mappa per visualizzare l'intera area definita dall'oggetto LatLngBounds.

Combinando queste API di Google Maps Platform, l'applicazione offre un'esperienza completa e interattiva per cercare luoghi, visualizzarne i dettagli e visualizzare informazioni geografiche correlate come le destinazioni secondarie e i contorni degli edifici.

Considerazioni sull'implementazione Tieni presente che questa funzionalità non funziona in tutte le aree degli aeroporti ed è soggetta alla disponibilità dei dati (terminal dell'aeroporto).

Risorse API Geocoding API Places API Maps JavaScript

Autori: