Cette page a été traduite par l'API Cloud Translation.

Navigation améliorée vers les aéroports

Les aéroports sont de grands complexes à plusieurs terminaux. Une navigation précise est essentielle pour que les arrivées et les départs se fassent à l'heure. L'API Google Maps Geocoding renvoie généralement des coordonnées (latitude/longitude) qui, dans la plupart des cas, correspondent au centroïde du grand complexe aéroportuaire. Cette application est un outil interactif conçu spécifiquement pour aider les utilisateurs à identifier et visualiser des lieux précis dans un grand complexe, comme des terminaux ou des points de dépose/récupération spécifiques dans un aéroport.

Voici comment cela fonctionne :

Recherche d'aéroports/de lieux : les utilisateurs commencent par rechercher un lieu principal (par exemple, "Aéroport international Indira Gandhi") à l'aide de l'entrée Google Places Autocomplete, qui est limitée à l'Inde.

Découverte des sous-lieux : une fois un lieu principal sélectionné, le script utilise l'API Google Places pour récupérer des informations, y compris les éventuelles"sous-destinations" associées à ce lieu (comme le terminal 1, le terminal 3, des portes spécifiques, etc., si elles sont disponibles dans les données de Google).

Cartographie visuelle : le script utilise l'API Geocoding pour trouver les coordonnées de la destination principale et de ses sous-destinations.

Il affiche ensuite l'emplacement principal et place des repères distincts cliquables (cercles bleus) sur la carte pour chaque sous-destination identifiée.

Identification précise : lorsque l'utilisateur clique sur un repère de sous-destination, celui-ci est mis en surbrillance (il devient vert) et une info-bulle s'ouvre, affichant son nom et d'autres informations disponibles (comme l'adresse ou le type). L'utilisateur peut ainsi confirmer qu'il a sélectionné le bon point précis. Vue contextuelle : la carte ajuste automatiquement sa vue (fitBounds) pour vérifier que tous les repères pertinents (emplacement principal + sous-destinations) sont clairement visibles.

API Google Maps Platform dans l'application de navigation dans les aéroports

Ce document explique les principales API Google Maps Platform et leurs paramètres utilisés dans l'application de démonstration "Navigate to Airport" (Naviguer vers l'aéroport) fournie. L'application utilise plusieurs services pour afficher la carte, rechercher des lieux, fournir des informations détaillées sur les lieux et proposer des insights avancés sur la localisation.

1. Initialisation et affichage de la carte

La base de l'application est la carte interactive elle-même.

API utilisée : google.maps.Map (de l'API Maps JavaScript)
Objectif : créer et afficher la carte interactive sur la page Web.
Paramètres clés :
- center : définit le centre géographique initial de la carte. Dans cette application, il est initialement défini sur les coordonnées de Delhi ({ lat: 28.461835685621395, lng: 77.05004035761647 }).
- zoom : définit le niveau de zoom initial de la carte. DEFAULT_ZOOM_LEVEL (15) est utilisé pour un gros plan.
- mapId : identifiant unique d'un style de carte configuré dans la console Google Cloud.

2. Recherche de lieux et saisie semi-automatique

La fonctionnalité de la barre de recherche est optimisée par l'API Places.

API utilisée : google.maps.places.Autocomplete (de la bibliothèque Places de l'API Maps JavaScript)
Objectif : fournit une saisie semi-automatique pour les recherches géographiques au fur et à mesure que l'utilisateur saisit du texte, en suggérant des lieux pertinents tels que des aéroports.
Paramètres clés :
- input : élément d'entrée HTML (#search-input) dans lequel l'utilisateur saisit sa requête.
- componentRestrictions : filtre les résultats de recherche sur un pays spécifique. Ici, { country: 'in' } limite les résultats à l'Inde.
- fields : spécifie les champs de données à renvoyer pour le lieu sélectionné. ['place_id'] est utilisé au départ pour ne récupérer que l'identifiant unique du lieu, ce qui permet d'optimiser le transfert de données.
Utiliser la saisie semi-automatique

    // 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. Récupérer des informations détaillées sur un lieu et gérer les sous-destinations

Une fois un lieu sélectionné parmi les suggestions de saisie semi-automatique, des informations plus complètes sont récupérées.

API utilisée : API Places (via un appel fetch direct à https://places.googleapis.com/v1/places/{placeId})
Objectif : récupérer des informations détaillées sur un lieu spécifique, y compris son nom à afficher, son adresse, ses types et, surtout, ses subDestinations (par exemple, les terminaux individuels ou les zones importantes d'un grand complexe comme un aéroport).
Paramètres clés dans l'URL :
1. {placeId} : identifiant unique du lieu sélectionné.
2. fields : spécifie les champs de données exacts à récupérer. L'application demande id, displayName, subDestinations, types et formattedAddress. C'est essentiel pour contrôler les coûts et ne recevoir que les données nécessaires.
Obtenir subDestinations à partir d'un lieu

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. Geocoding et geocoding inversé : récupérer les détails des sous-destinations

L'application utilise le géocodage à deux fins principales : convertir les ID de lieu en coordonnées et reconvertir les coordonnées en informations sur le lieu. Cette section explique plus précisément comment le géocodage est utilisé pour obtenir des informations détaillées sur les sous-destinations.

API utilisées : google.maps.Geocoder (à partir de l'API Maps JavaScript) et API Geocoding (via un appel fetch direct à https://maps.googleapis.com/maps/api/geocode/json)
Objectif :
- google.maps.Geocoder : utilisé pour convertir un placeId (obtenu à partir de l'API Autocomplete ou Places) en coordonnées géographiques (lat, lng) et en une fenêtre d'affichage, ce qui permet à la carte de se centrer et de zoomer correctement sur le lieu sélectionné et ses sous-destinations.
- API Geocoding (fetch) : utilisée pour le géocodage inversé (conversion de la latitude et de la longitude en une adresse lisible par un humain) et pour récupérer des données de localisation avancées telles que les contours des bâtiments et les points de navigation.
Paramètres clés :
- google.maps.Geocoder.geocode() :
  - placeId : ID du lieu à géocoder.
  - location : objet LatLng pour le géocodage inversé.
- Appel de l'API Geocoding fetch :
  - latlng : coordonnées de latitude et de longitude pour le géocodage inversé.
  - extra_computations=BUILDING_AND_ENTRANCES : ce paramètre essentiel demande des données supplémentaires, en particulier des empreintes de bâtiments et des informations sur les entrées, qui sont ensuite utilisées pour afficher les contours des bâtiments et les points de navigation.

Utiliser l'ID subDestination pour obtenir plus d'informations (par exemple, la position, l'adresse mise en forme ou les types)

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. Afficher les repères

Les repères permettent de mettre en évidence des lieux spécifiques sur la carte.

API utilisée : google.maps.Marker (de l'API Maps JavaScript) et google.maps.marker.AdvancedMarkerElement avec google.maps.marker.PinElement (de la bibliothèque Marker de l'API Maps JavaScript)
Objectif :
- google.maps.Marker : utilisé pour le repère déplaçable initial (bien que draggable soit défini sur false dans le code fourni, il fait partie de sa capacité) et pour les repères de sous-destinations de base, comme décrit dans la section 3.
- AdvancedMarkerElement et PinElement : utilisés pour les repères de points de navigation plus distincts visuellement, ce qui permet de personnaliser le style de l'épingle du repère.
Paramètres clés :
- position : coordonnées LatLng où le repère sera placé.
- map : instance de carte sur laquelle le repère sera affiché.
- title : texte affiché lorsque vous pointez sur le repère.
- icon : permet d'utiliser des icônes personnalisées pour google.maps.Marker (par exemple, google.maps.SymbolPath.CIRCLE avec des couleurs personnalisées).
- content : pour AdvancedMarkerElement, cela permet d'intégrer du contenu HTML personnalisé, y compris PinElement pour les épingles pré-stylisées.
- Paramètres PinElement : background, borderColor, glyphColor et scale pour la personnalisation visuelle.

6. Afficher les contours des bâtiments

L'application peut représenter visuellement l'empreinte des bâtiments.

API utilisée : google.maps.Data (de l'API Maps JavaScript)
Objectif : afficher des données géographiques, telles que les contours des bâtiments (renvoyés sous forme de display_polygon GeoJSON par la méthode extra_computations de l'API Geocoding).
Paramètres clés :
- map : instance de carte à laquelle la couche de données est appliquée.
- style : définit l'apparence visuelle des entités GeoJSON (par exemple, strokeColor, fillColor, fillOpacity).
- addGeoJson() : méthode permettant d'ajouter des données GeoJSON au calque.

7. Limites et zoom de la carte

vérifier que la vue cartographique englobe tous les lieux concernés.

API utilisée : google.maps.LatLngBounds (de l'API Maps JavaScript)
Objectif : ajuster dynamiquement la fenêtre d'affichage de la carte pour l'adapter à une collection de points géographiques (par exemple, le lieu principal et toutes ses sous-destinations).
Méthodes clés :
- extend(location) : ajoute un point LatLng aux limites, en les étendant si nécessaire.
- fitBounds(bounds) : ajuste le centre et le niveau de zoom de la carte pour afficher l'intégralité de la zone définie par l'objet LatLngBounds.

En combinant ces API Google Maps Platform, l'application offre une expérience complète et interactive pour rechercher des lieux, afficher leurs détails et visualiser les informations géographiques associées, comme les sous-destinations et les contours des bâtiments.

Points à prendre en compte pour l'implémentation Notez que cela ne fonctionne pas dans toutes les zones aéroportuaires et dépend de la disponibilité des données (terminal de l'aéroport).

Ressources API Geocoding API Places API Maps JavaScript

Auteurs :

Navigation améliorée vers les aéroports Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.