Navegação aprimorada para aeroportos

imagem

Os aeroportos são grandes complexos com vários terminais, e a navegação precisa é essencial para chegadas e partidas pontuais. Normalmente, a API Geocoding do Google Maps retorna uma coordenada (latitude/longitude), que na maioria dos casos é o centroide do grande complexo aeroportuário. Esse app é uma ferramenta interativa projetada especificamente para ajudar os usuários a identificar e visualizar locais precisos em um local grande e complexo, como terminais específicos ou pontos de embarque/desembarque em um aeroporto.

imagem

Veja como isso é feito:

Pesquisa de aeroporto/local: os usuários começam pesquisando um local principal (por exemplo, "Aeroporto Internacional Indira Gandhi") usando a entrada do Google Places Autocomplete, que é restrita à Índia.

Descoberta de sublocalizações: depois que um local principal é selecionado, o script usa a API Google Places para buscar detalhes, incluindo principalmente os "subdestinos" listados associados a esse lugar (como Terminal 1, Terminal 3, portões específicos etc., se disponíveis nos dados do Google).

Mapeamento visual: o script usa a API Geocoding para encontrar as coordenadas do local principal e dos subdestinos.

Em seguida, ele mostra o local principal e coloca marcadores distintos e clicáveis (círculos azuis) no mapa para cada subdestino identificado.

Identificação precisa: clicar em um marcador de subdestino o destaca (fica verde) e abre uma janela de informações mostrando o nome e outros detalhes disponíveis (como endereço ou tipo), permitindo que o usuário confirme se selecionou o ponto específico correto. Visualização contextual: o mapa ajusta automaticamente a visualização (fitBounds) para verificar se todos os marcadores relevantes (local principal e subdestinos) estão claramente visíveis.

APIs da Plataforma Google Maps no app de navegação em aeroportos

Este documento explica as principais APIs da Plataforma Google Maps e os parâmetros usados no aplicativo de demonstração "Navegar até o aeroporto". O app usa vários serviços para fornecer exibição de mapa, pesquisa de lugares, informações detalhadas sobre lugares e insights avançados de localização.

1. Inicialização e exibição do mapa

A base do aplicativo é o próprio mapa interativo.

  • API usada:google.maps.Map (da API Maps JavaScript)
  • Finalidade:criar e mostrar o mapa interativo na página da Web.
  • Parâmetros principais:
    • center: define o centro geográfico inicial do mapa. Neste app, ele é inicialmente definido como as coordenadas de Délhi ({ lat: 28.461835685621395, lng: 77.05004035761647 }).
    • zoom: define o nível de zoom inicial do mapa. DEFAULT_ZOOM_LEVEL (15) é usado para uma visualização em close-up.
    • mapId: um identificador exclusivo de um estilo de mapa configurado no console do Google Cloud.

2. Place Search e Autocomplete

A funcionalidade da barra de pesquisa é fornecida pela API Places.

  • API usada:google.maps.places.Autocomplete (da biblioteca Places da API Maps JavaScript)
  • Finalidade:oferece preenchimento automático de texto preditivo para pesquisas geográficas à medida que o usuário digita, sugerindo lugares relevantes, como aeroportos.
  • Parâmetros principais:
    • input: o elemento de entrada HTML (#search-input) em que o usuário digita a consulta.
    • componentRestrictions: filtra os resultados da pesquisa para um país específico. Aqui, { country: 'in' } restringe os resultados à Índia.
    • fields: especifica os campos de dados que serão retornados para o lugar selecionado. ['place_id'] é usado inicialmente para recuperar apenas o identificador exclusivo do lugar, otimizando a transferência de dados.
  • Como usar o preenchimento automático
    // 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. Recuperar informações detalhadas sobre lugares e processar subdestinos

Depois que um lugar é selecionado nas sugestões de preenchimento automático, mais detalhes abrangentes são buscados.

  • API usada:API Places (via chamada direta de fetch para https://places.googleapis.com/v1/places/{placeId})
  • Finalidade:recuperar detalhes avançados sobre um lugar específico, incluindo nome de exibição, endereço, tipos e, principalmente, subDestinations (por exemplo, terminais individuais ou áreas importantes em um complexo maior, como um aeroporto).
  • Parâmetros principais no URL:
    1. {placeId}: o identificador exclusivo do lugar selecionado.
    2. fields: especifica os campos de dados exatos a serem recuperados. O app solicita id, displayName, subDestinations, types e formattedAddress. Isso é fundamental para controlar custos e receber apenas os dados necessários.
  • Como receber subDestinations de um local
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ção e geocodificação inversa: busca de detalhes para subdestinos

O aplicativo usa a geocodificação para duas finalidades principais: converter IDs de lugar em coordenadas e converter coordenadas de volta em detalhes de local. Esta seção destaca especificamente como a geocodificação é usada para receber informações detalhadas sobre subdestinos.

  • API usada:google.maps.Geocoder (da API Maps JavaScript) e API Geocoding (via chamada direta fetch para https://maps.googleapis.com/maps/api/geocode/json)
  • Finalidade:
    • google.maps.Geocoder: usado para converter um placeId (obtido da API Autocomplete ou Places) em coordenadas geográficas (lat, lng) e uma janela de visualização, permitindo que o mapa seja centralizado e tenha zoom correto no local selecionado e nos subdestinos dele.
    • API Geocoding (fetch): usada para geocodificação reversa (conversão de latitude e longitude em um endereço legível para humanos) e para recuperar dados avançados de localização, como contornos de edifícios e pontos de navegação.
  • Parâmetros principais:
    • google.maps.Geocoder.geocode():
      • placeId: o ID do lugar a ser geocodificado.
      • location: o objeto LatLng para geocodificação reversa.
    • Chamada da API Geocoding fetch:
      • latlng: as coordenadas de latitude e longitude para a geocodificação inversa.
      • extra_computations=BUILDING_AND_ENTRANCES: esse parâmetro crítico solicita dados adicionais, especificamente pegadas de construção e informações de entrada, que são usadas para mostrar contornos de edifícios e pontos de navegação.

Como usar o ID subDestination para buscar mais detalhes (por exemplo, local, endereço formatado, 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. Mostrar marcadores

Os marcadores são usados para destacar locais específicos no mapa.

  • API usada:google.maps.Marker (da API Maps JavaScript) e google.maps.marker.AdvancedMarkerElement com google.maps.marker.PinElement (da biblioteca de marcadores da API Maps JavaScript)
  • Finalidade:
    • google.maps.Marker: usado para o marcador arrastável inicial (embora draggable esteja definido como false no código fornecido, ele faz parte da capacidade) e para marcadores de subdestino básicos, conforme descrito na seção 3.
    • AdvancedMarkerElement e PinElement: usados para os marcadores de ponto de navegação mais visualmente distintos, permitindo a estilização personalizada do alfinete do marcador.
  • Parâmetros principais:
    • position: as coordenadas LatLng onde o marcador será colocado.
    • map: a instância do mapa em que o marcador será exibido.
    • title: texto exibido ao passar o cursor sobre o marcador.
    • icon: permite ícones personalizados para google.maps.Marker (por exemplo, google.maps.SymbolPath.CIRCLE com cores personalizadas).
    • content: para AdvancedMarkerElement, isso permite incorporar conteúdo HTML personalizado, incluindo PinElement para ícones pré-estilizados.
    • Parâmetros PinElement: background, borderColor, glyphColor, scale para personalização visual.

6. Como mostrar contornos de edifícios

O aplicativo pode representar visualmente a área construída dos edifícios.

  • API usada:google.maps.Data (da API Maps JavaScript)
  • Finalidade:exibir dados geográficos, como contornos de edifícios (retornados como GeoJSON display_polygon da extra_computations da API Geocoding).
  • Parâmetros principais:
    • map: a instância do mapa a que a camada de dados é aplicada.
    • style: define a aparência visual dos recursos GeoJSON (por exemplo, strokeColor, fillColor, fillOpacity).
    • addGeoJson(): método para adicionar dados GeoJSON à camada.

7. Limites e zoom do mapa

verificando se a visualização do mapa abrange todos os locais relevantes.

  • API usada:google.maps.LatLngBounds (da API Maps JavaScript)
  • Finalidade:ajustar dinamicamente a janela de visualização do mapa para se adequar a uma coleção de pontos geográficos (por exemplo, o lugar principal e todos os subdestinos dele).
  • Principais métodos:
    • extend(location): adiciona um ponto LatLng aos limites, expandindo-os se necessário.
    • fitBounds(bounds): ajusta o centro e o nível de zoom do mapa para mostrar toda a área definida pelo objeto LatLngBounds.

Ao combinar essas APIs da Plataforma Google Maps, o aplicativo oferece uma experiência abrangente e interativa para pesquisar lugares, ver detalhes e visualizar informações geográficas relacionadas, como subdestinos e contornos de edifícios.

Considerações sobre a implementação Isso não funciona em todas as áreas dos aeroportos e está sujeito à disponibilidade de dados (terminal do aeroporto).

Recursos API Geocoding API Places API Maps JavaScript

Autores: