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 muestra una coordenada (latitud/longitud) que, en la mayoría de los casos, sería el centroide del gran complejo del aeropuerto. 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

Para lograrlo, se hace lo siguiente:

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

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

Asignación visual: 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 destino secundario identificado.

Identificación precisa: Cuando se hace clic en un marcador de destino secundario, se destaca (se vuelve 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 + destinos secundarios) sean claramente visibles.

APIs de Google Maps Platform en la app de navegación del aeropuerto

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 "Navigate to Airport" proporcionada. La app aprovecha varios servicios para proporcionar visualización de mapas, búsqueda de lugares, información detallada sobre lugares y estadísticas de ubicación avanzadas.

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, se establece inicialmente en las coordenadas de Delhi ({ lat: 28.461835685621395, lng: 77.05004035761647 }).
    • zoom: Establece el nivel de zoom inicial del mapa. Se usa DEFAULT_ZOOM_LEVEL (15) 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 funciona con la API de Places.

  • API utilizada: google.maps.places.Autocomplete (de la biblioteca de Places de la API de Maps JavaScript)
  • Propósito: Proporciona finalización de texto predictiva para 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 consulta.
    • componentRestrictions: Filtra los resultados de la búsqueda a un país específico. Aquí, { country: 'in' } restringe los resultados a la India.
    • fields: Especifica los campos de datos que se mostrará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. Recuperación de información detallada sobre lugares y manejo de destinos secundarios

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

  • API utilizada: API de Places (a través de la llamada fetch directa a 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, fundamentalmente, sus 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 dada 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: Recuperación de detalles para destinos secundarios

La aplicación usa la geocodificación para dos propósitos principales: convertir IDs de lugares en coordenadas y volver a convertir las 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.

  • API utilizada: google.maps.Geocoder (de la API de Maps JavaScript) y la API de Geocoding (a través de la llamada fetch directa a https://maps.googleapis.com/maps/api/geocode/json)
  • Propósito:
    • google.maps.Geocoder: Se usa para convertir un placeId (obtenido de Autocomplete o de la API de Places) en coordenadas geográficas (lat, lng) y un viewport, lo que permite que el mapa se centre y haga zoom 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) y para recuperar datos de ubicación avanzados, como los contornos de edificios y los puntos de navegación.
  • Parámetros clave:
    • google.maps.Geocoder.geocode():
      • placeId: Es el ID de lugar para geocodificar.
      • location: Es el objeto LatLng para la geocodificación inversa.
    • Llamada fetch a la API de Geocoding:
      • latlng: Son las coordenadas de latitud y longitud para la geocodificación inversa.
      • extra_computations=BUILDING_AND_ENTRANCES: Este parámetro fundamental solicita datos adicionales, específicamente las plantas de edificios y la información de entrada, que luego se usan para mostrar los contornos de 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. Visualización de marcadores

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

  • API utilizada: 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 inicial que se puede arrastrar (aunque draggable se establece en false en el código proporcionado, forma parte de su capacidad) y para los marcadores básicos de destinos secundarios, como se describe en la sección 3.
    • AdvancedMarkerElement y PinElement: Se usan para los marcadores de puntos de navegación más visualmente distintos, lo que permite aplicar un estilo personalizado al pin del marcador.
  • Parámetros clave:
    • position: Son las coordenadas 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: Para AdvancedMarkerElement, permite incorporar contenido HTML personalizado, incluido PinElement para pines con estilo predefinido.
    • Parámetros de PinElement: background, borderColor, glyphColor, scale para la personalización visual.

6. Visualización de contornos de edificios

La aplicación puede representar visualmente la planta 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 display_polygon de GeoJSON 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 funciones de GeoJSON (p.ej., strokeColor, fillColor, fillOpacity).
    • addGeoJson(): Es el método para agregar datos de GeoJSON a la capa.

7. Límites del mapa y zoom

verifica que la vista del mapa abarque todas las ubicaciones relevantes.

  • 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 destinos secundarios)
  • 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.

Si se combinan 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 destinos secundarios y contornos 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 (terminales de aeropuertos).

Recursos API de Geocoding API de Places API de Maps JavaScript

Autores: