Navigation améliorée vers les aéroports

Les aéroports sont de grands complexes à plusieurs terminaux. Une navigation précise est essentielle pour les arrivées et les départs à l'heure. L'API Geocoding de Google Maps renvoie généralement une coordonnée (latitude/longitude) qui, dans la plupart des cas, correspond 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 emplacements précis dans un grand complexe, comme des terminaux spécifiques ou des points de prise en charge/dépose dans un aéroport.

Voici comment elle y parvient :

Recherche d'aéroport/de lieu : les utilisateurs commencent par rechercher un emplacement principal (par exemple, "Aéroport international Indira Gandhi") à l'aide de la saisie semi-automatique de Google Places, qui est limitée à l'Inde.

Découverte de sous-emplacements: une fois qu'un emplacement principal est sélectionné, le script utilise l'API Google Places pour récupérer des informations, y compris les "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).

Mappage visuel : le script utilise l'API Geocoding pour trouver les coordonnées de l'emplacement principal et de ses sous-destinations.

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

Identification précise : lorsque vous cliquez sur un repère de sous-destination, il est mis en surbrillance (devient vert) et une fenêtre d'informations s'ouvre, affichant son nom et d'autres informations disponibles (comme l'adresse ou le type), ce qui permet à l'utilisateur de confirmer qu'il a sélectionné le point spécifique correct. 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 aéroportuaire

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 exploite plusieurs services pour afficher la carte, rechercher des lieux, fournir des informations détaillées sur les lieux et des insights de localisation avancés.

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 une vue rapprochée.
  • mapId: identifiant unique d'un style de carte configuré dans la console Google Cloud.

2. Place Search et saisie semi-automatique

La fonctionnalité de la barre de recherche est alimenté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 tape, en suggérant des lieux pertinents comme 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é initialement pour ne récupérer que l' identifiant unique du lieu, ce qui optimise 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 qu'un lieu est sélectionné dans 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, des terminaux individuels ou des zones importantes dans 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. Cela est essentiel pour contrôler les coûts et ne recevoir que les données nécessaires.
• Comment obtenir subDestinations pour un lieu donné

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 des informations sur les sous-destinations

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

• API utilisée : google.maps.Geocoder (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 : permet de convertir un placeId (obtenu à partir de la saisie semi-automatique ou de l'API 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) : permet d'effectuer un geocoding inversé (conversion de la latitude et de la longitude en une adresse lisible) et de 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 de lieu à géocoder.
    • location : objet LatLng pour le geocoding inversé.
  • Appel fetch de l'API Geocoding :
    • latlng: coordonnées de latitude et de longitude pour le geocoding inversé.
    • extra_computations=BUILDING_AND_ENTRANCES: ce paramètre essentiel demande des données supplémentaires, en particulier les empreintes au sol des bâtiments et les 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 récupérer d'autres informations (par exemple, le lieu, l'adresse formatée, 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 des 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 de repères 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 ses fonctionnalités) et pour les repères de sous-destination 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, permet d'intégrer du contenu HTML personnalisé, y compris PinElement pour les épingles pré-stylisées.
  • Paramètres PinElement : background, borderColor, glyphColor, scale pour la personnalisation visuelle.

6. Afficher les contours des bâtiments

L'application peut représenter visuellement l'empreinte au sol 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 en tant que display_polygon GeoJSON à partir de extra_computations de l'API Geocoding).
• Paramètres clés
  • map : instance de carte à laquelle le calque de données est appliqué.
  • style: définit l'apparence visuelle des fonctionnalité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 pertinents.

• 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 à un ensemble 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'ensemble 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 informations et visualiser des informations géographiques associées, telles que les sous-destinations et les contours des bâtiments.

Considérations concernant 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 aéroportuaire).

Ressources API Geocoding API Places API Maps JavaScript

Auteurs :