Navegación mejorada a aeropuertos

imagen

Los aeropuertos son complejos grandes con varias terminales, y la navegación precisa es fundamental para las llegadas y salidas a tiempo. Por lo general, la API de Geocoding de Google Maps devolvería una coordenada (latitud/longitud) que, en la mayoría de los casos, sería el centroide del gran complejo aeroportuario. Esta app es una herramienta interactiva diseñada específicamente para ayudar a los usuarios a identificar y visualizar ubicaciones precisas dentro de un lugar complejo más grande, como terminales específicas o puntos de partida y llegada dentro de un aeropuerto.

imagen

A continuación, te mostramos cómo lo logra:

Búsqueda de aeropuertos o lugares: Los usuarios comienzan buscando una ubicación principal (p.ej., "Aeropuerto Internacional Indira Gandhi") con la entrada de Google Places Autocomplete, que está restringida a la India.

Descubrimiento de sububicaciones: Una vez que se selecciona una ubicación principal, la secuencia de comandos usa la API de Google Places para recuperar detalles, incluidos los "subdestinos" asociados con ese lugar (como la Terminal 1, la Terminal 3, puertas específicas, etcétera, si están disponibles en los datos de Google).

Visual Mapping: La secuencia de comandos usa la API de Geocoding para encontrar las coordenadas de la ubicación principal y sus destinos secundarios.

Luego, muestra la ubicación principal y coloca marcadores distintos en los que se puede hacer clic (círculos azules) en el mapa para cada subdestino identificado.

Identificación precisa: Cuando se hace clic en un marcador de subdestino, se destaca (se pone de color verde) y se abre una ventana de información que muestra su nombre y otros detalles disponibles (como la dirección o el tipo), lo que permite que el usuario confirme que seleccionó el punto específico correcto. Vista contextual: El mapa ajusta automáticamente su vista (fitBounds) para verificar que todos los marcadores relevantes (ubicación principal y destinos secundarios) sean claramente visibles.

APIs de Google Maps Platform en la app de navegación en aeropuertos

En este documento, se explican las APIs clave de Google Maps Platform y sus parámetros que se usan en la aplicación de demostración "Navegar al aeropuerto" proporcionada. La app aprovecha varios servicios para proporcionar la visualización del mapa, la búsqueda de lugares, la información detallada de lugares y estadísticas avanzadas de ubicación.

1. Inicialización y visualización del mapa

La base de la aplicación es el mapa interactivo.

  • API utilizada: google.maps.Map (de la API de Maps JavaScript)
  • Propósito: Crear y mostrar el mapa interactivo en la página web.
  • Parámetros clave:
    • center: Define el centro geográfico inicial del mapa. En esta app, inicialmente se establece en las coordenadas de Delhi ({ lat: 28.461835685621395, lng: 77.05004035761647 }).
    • zoom: Establece el nivel de zoom inicial del mapa. DEFAULT_ZOOM_LEVEL (15) se usa para una vista de primer plano.
    • mapId: Es un identificador único para un diseño de mapa configurado en la consola de Google Cloud.

2. Place Search y Autocomplete

La funcionalidad de la barra de búsqueda se basa en la API de Places.

  • API utilizada: google.maps.places.Autocomplete (de la biblioteca de Places de la API de Maps JavaScript)
  • Propósito: Proporciona autocompletado de texto predictivo para las búsquedas geográficas a medida que el usuario escribe, y sugiere lugares relevantes, como aeropuertos.
  • Parámetros clave:
    • input: Es el elemento de entrada HTML (#search-input) en el que el usuario escribe su búsqueda.
    • componentRestrictions: Filtra los resultados de la búsqueda para un país específico. Aquí, { country: 'in' } restringe los resultados a la India.
    • fields: Especifica los campos de datos que se devolverán para el lugar seleccionado. ['place_id'] se usa inicialmente para recuperar solo el identificador único del lugar, lo que optimiza la transferencia de datos.
  • Cómo usar Autocomplete
    // 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. Cómo recuperar información detallada de lugares y controlar subdestinos

Una vez que se selecciona un lugar de las sugerencias de autocompletado, se recuperan detalles más completos.

  • API utilizada: API de Places (a través de una llamada directa a fetch https://places.googleapis.com/v1/places/{placeId})
  • Propósito: Recuperar detalles enriquecidos sobre un lugar específico, incluidos su nombre visible, dirección, tipos y, de manera fundamental, su subDestinations (p. ej., terminales individuales o áreas importantes dentro de un complejo más grande, como un aeropuerto)
  • Parámetros clave en la URL:
    1. {placeId}: Es el identificador único del lugar seleccionado.
    2. fields: Especifica los campos de datos exactos que se recuperarán. La app solicita id, displayName, subDestinations, types y formattedAddress. Esto es fundamental para controlar los costos y recibir solo los datos necesarios.
  • Cómo obtener subDestinations a partir de una ubicación
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. Geocodificación y geocodificación inversa: Cómo recuperar detalles de destinos secundarios

La aplicación usa la geocodificación con dos fines principales: convertir IDs de lugar en coordenadas y convertir coordenadas en detalles de ubicación. En esta sección, se destaca específicamente cómo se usa la geocodificación para obtener información detallada sobre los destinos secundarios.

  • APIs utilizadas: google.maps.Geocoder (de la API de Maps JavaScript) y la API de Geocoding (a través de una llamada directa a fetch de https://maps.googleapis.com/maps/api/geocode/json)
  • Propósito:
    • google.maps.Geocoder: Se usa para convertir un placeId (obtenido de la API de Places o de Autocomplete) en coordenadas geográficas (lat, lng) y una ventana gráfica, lo que permite que el mapa se centre y se acerque correctamente en el lugar seleccionado y sus destinos secundarios.
    • API de Geocoding (fetch): Se usa para la geocodificación inversa (convertir la latitud y la longitud en una dirección legible para las personas) y para recuperar datos de ubicación avanzados, como los esquemas de edificios y los puntos de navegación.
  • Parámetros clave:
    • google.maps.Geocoder.geocode():
      • placeId: Es el ID de lugar para la geocodificación.
      • location: Es el objeto LatLng para la codificación geográfica inversa.
    • Llamada a la API de Geocoding fetch:
      • latlng: Son las coordenadas de latitud y longitud para la geocodificación inversa.
      • extra_computations=BUILDING_AND_ENTRANCES: Este parámetro crítico solicita datos adicionales, específicamente las huellas de los edificios y la información de las entradas, que luego se usan para mostrar los contornos de los edificios y los puntos de navegación.

Cómo usar el ID de subDestination para recuperar más detalles (p.ej., ubicación, dirección con formato, tipos)

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. Cómo mostrar marcadores

Los marcadores se usan para destacar ubicaciones específicas en el mapa.

  • APIs utilizadas: google.maps.Marker (de la API de Maps JavaScript) y google.maps.marker.AdvancedMarkerElement con google.maps.marker.PinElement (de la biblioteca de Marker de la API de Maps JavaScript)
  • Propósito:
    • google.maps.Marker: Se usa para el marcador arrastrable inicial (aunque draggable se establece en false en el código proporcionado, forma parte de su capacidad) y para los marcadores de subdestinos básicos, como se describe en la sección 3.
    • AdvancedMarkerElement y PinElement: Se usan para los marcadores de puntos de navegación más distintivos visualmente, lo que permite aplicar un diseño personalizado al pin del marcador.
  • Parámetros clave:
    • position: Son las coordenadas de LatLng en las que se colocará el marcador.
    • map: Es la instancia del mapa en la que se mostrará el marcador.
    • title: Es el texto que se muestra cuando se coloca el cursor sobre el marcador.
    • icon: Permite íconos personalizados para google.maps.Marker (p.ej., google.maps.SymbolPath.CIRCLE con colores personalizados).
    • content: En el caso de AdvancedMarkerElement, permite incorporar contenido HTML personalizado, incluido PinElement para los pines con diseño previo.
    • Parámetros PinElement: background, borderColor, glyphColor y scale para la personalización visual

6. Cómo mostrar los contornos de los edificios

La aplicación puede representar visualmente la huella de los edificios.

  • API utilizada: google.maps.Data (de la API de Maps JavaScript)
  • Propósito: Mostrar datos geográficos, como los contornos de edificios (que se muestran como GeoJSON display_polygon desde extra_computations de la API de Geocoding).
  • Parámetros clave:
    • map: Es la instancia del mapa a la que se aplica la capa de datos.
    • style: Define la apariencia visual de las entidades de GeoJSON (p.ej., strokeColor, fillColor y fillOpacity).
    • addGeoJson(): Es el método para agregar datos de GeoJSON a la capa.

7. Límites y zoom del mapa

Verifica que la vista del mapa abarque todas las ubicaciones pertinentes.

  • API utilizada: google.maps.LatLngBounds (de la API de Maps JavaScript)
  • Propósito: Ajustar de forma dinámica el viewport del mapa para que se ajuste a una colección de puntos geográficos (p.ej., el lugar principal y todos sus subdestinos).
  • Métodos clave:
    • extend(location): Agrega un punto LatLng a los límites y los expande si es necesario.
    • fitBounds(bounds): Ajusta el centro y el nivel de zoom del mapa para mostrar toda el área definida por el objeto LatLngBounds.

Al combinar estas APIs de Google Maps Platform, la aplicación proporciona una experiencia integral e interactiva para buscar lugares, ver sus detalles y visualizar información geográfica relacionada, como subdestinos y esquemas de edificios.

Consideraciones de implementación Ten en cuenta que esto no funciona en todas las áreas de los aeropuertos y está sujeto a la disponibilidad de datos (de la terminal del aeropuerto).

Recursos API de Geocoding API de Places API de Maps JavaScript

Autores: