Havaalanlarına daha iyi navigasyon

resim

Havaalanları büyük ve çok terminalli komplekslerdir. Zamanında varış ve kalkış için hassas navigasyon çok önemlidir. Google Maps Geocoding API genellikle bir koordinat (enlem/boylam) döndürür. Bu koordinat çoğu durumda büyük havaalanı kompleksinin ağırlık merkezi olur. Bu uygulama, kullanıcıların daha büyük bir kompleks alandaki (ör. havaalanı içindeki belirli terminaller veya teslim alma/bırakma noktaları) kesin konumları belirleyip görselleştirmesine yardımcı olmak için özel olarak tasarlanmış etkileşimli bir araçtır.

resim

Bu özelliği kullanmak için yapmanız gerekenler:

Havaalanı/Mekân Arama: Kullanıcılar, ana bir konumu (ör. "Indira Gandhi International Airport") kullanarak Google Yerler Otomatik Tamamlama girişini kullanın. Bu giriş Hindistan ile sınırlıdır.

Alt Konum Bulma: Birincil konum seçildikten sonra komut dosyası, Google Places API'yi kullanarak ayrıntıları getirir. Bu ayrıntılar arasında, söz konusu yerle ilişkili listelenen tüm "alt hedefler" (ör. Google'ın verilerinde varsa Terminal 1, Terminal 3, belirli kapılar vb.) de yer alır.

Görsel Haritalama: Komut dosyası, ana konumun ve alt hedeflerinin koordinatlarını bulmak için Geocoding API'yi kullanır.

Ardından, ana konumu gösterir ve tanımlanan her alt hedef için haritada farklı, tıklanabilir işaretçiler (mavi daireler) yerleştirir.

Kesin Tanımlama: Bir alt hedef işaretçisini tıkladığınızda işaretçi vurgulanır (yeşile döner) ve adını ve diğer mevcut ayrıntılarını (adres veya tür gibi) gösteren bir bilgi penceresi açılır. Böylece kullanıcı, doğru noktayı seçtiğini onaylayabilir. Bağlama Dayalı Görünüm: Harita, alakalı tüm işaretçilerin (ana konum + alt hedefler) net bir şekilde görünmesini sağlamak için görünümünü (fitBounds) otomatik olarak ayarlar.

Havalimanı Navigasyon Uygulamasındaki Google Haritalar Platformu API'leri

Bu belgede, sağlanan "Havaalanına Git" demo uygulamasında kullanılan temel Google Haritalar Platformu API'leri ve parametreleri açıklanmaktadır. Uygulama; harita görüntüleme, yer arama, ayrıntılı yer bilgileri ve gelişmiş konum analizleri sağlamak için çeşitli hizmetlerden yararlanır.

1. Harita başlatma ve görüntüleme

Uygulamanın temelini etkileşimli harita oluşturur.

  • Kullanılan API: google.maps.Map (Maps JavaScript API'den)
  • Amaç: Web sayfasında etkileşimli harita oluşturmak ve görüntülemek.
  • Önemli Parametreler:
    • center: Haritanın başlangıçtaki coğrafi merkezini tanımlar. Bu uygulamada başlangıçta Delhi'nin koordinatlarına ({ lat: 28.461835685621395, lng: 77.05004035761647 }) ayarlanır.
    • zoom: Haritanın ilk yakınlaştırma düzeyini ayarlar. DEFAULT_ZOOM_LEVEL (15), yakın çekim görünümü için kullanılır.
    • mapId: Google Cloud Console'da yapılandırılan bir harita stilinin benzersiz tanımlayıcısı.

2. Yer Arama ve Otomatik Tamamlama

Arama çubuğu işlevi, Places API tarafından desteklenir.

  • Kullanılan API: google.maps.places.Autocomplete (Maps JavaScript API'nin Yerler Kitaplığı'ndan)
  • Amaç: Kullanıcı yazarken coğrafi aramalar için tahmini metin tamamlama sağlar ve havaalanları gibi alakalı yerler önerir.
  • Önemli Parametreler:
    • input: Kullanıcının sorgusunu yazdığı HTML giriş öğesi (#search-input).
    • componentRestrictions: Arama sonuçlarını belirli bir ülkeye göre filtreler. Burada { country: 'in' }, sonuçları Hindistan ile sınırlandırıyor.
    • fields: Seçilen yer için döndürülecek veri alanlarını belirtir. ['place_id'], başlangıçta yalnızca yerin benzersiz tanımlayıcısını almak için kullanılır ve veri aktarımını optimize eder.
  • Otomatik tamamlama nasıl kullanılır?
    // 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. Ayrıntılı Yer Bilgilerini Alma ve Alt Hedefleri İşleme

Otomatik tamamlama önerilerinden bir yer seçildiğinde daha kapsamlı ayrıntılar alınır.

  • Kullanılan API: Places API (fetch doğrudan https://places.googleapis.com/v1/places/{placeId} çağrısı üzerinden)
  • Amaç: Belirli bir yerle ilgili zengin ayrıntıları (ör.görünen adı, adresi, türleri ve en önemlisi subDestinations) almak (ör. daha büyük bir kompleks içindeki bireysel terminaller veya önemli alanlar (havaalanı gibi)).
  • URL'deki Anahtar Parametreler:
    1. {placeId}: Seçilen yerin benzersiz tanımlayıcısı.
    2. fields: Alınacak tam veri alanlarını belirtir. Uygulama id, displayName, subDestinations, types ve formattedAddress istiyor. Bu, maliyetleri kontrol etmek ve yalnızca gerekli verileri almak için çok önemlidir.
  • Bir konum verildiğinde subDestinations nasıl alınır?
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. Coğrafi Kodlama ve Tersine Coğrafi Kodlama: Alt Hedeflerle İlgili Ayrıntıları Getirme

Uygulama, coğrafi kodlamayı iki temel amaç için kullanır: yer kimliklerini koordinatlara dönüştürme ve koordinatları tekrar konum ayrıntılarına dönüştürme. Bu bölümde, özellikle alt hedefler hakkında ayrıntılı bilgi edinmek için coğrafi kodlamanın nasıl kullanıldığı vurgulanmaktadır.

  • Kullanılan API: google.maps.Geocoder (Maps JavaScript API'den) ve Geocoding API (https://maps.googleapis.com/maps/api/geocode/json'ye doğrudan fetch çağrısı yapılarak)
  • Amaç:
    • google.maps.Geocoder: placeId (Autocomplete veya Places API'den alınır) öğesini coğrafi koordinatlara (lat, lng) ve bir görünüm penceresine dönüştürmek için kullanılır. Böylece harita, seçilen yere ve alt hedeflerine doğru şekilde ortalanıp yakınlaştırılabilir.
    • Geocoding API (fetch): Tersine coğrafi kodlama (enlem ve boylamı okunabilir bir adrese dönüştürme) ve bina ana hatları ile gezinme noktaları gibi gelişmiş konum verilerini alma için kullanılır.
  • Önemli Parametreler:
    • google.maps.Geocoder.geocode():
      • placeId: Coğrafi kodlama yapılacak yer kimliği.
      • location: Tersine coğrafi kodlama için LatLng nesnesi.
    • Geocoding API fetch çağrısı:
      • latlng: Tersine coğrafi kodlama için enlem ve boylam koordinatları.
      • extra_computations=BUILDING_AND_ENTRANCES: Bu kritik parametre, özellikle bina ayak izleri ve giriş bilgileri gibi ek veriler ister. Bu veriler daha sonra bina ana hatlarını ve gezinme noktalarını göstermek için kullanılır.

Daha fazla ayrıntı (ör. konum, biçimlendirilmiş adres, türler) getirmek için subDestination kimliğini kullanma

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. İşaretçileri Görüntüleme

İşaretçiler, haritadaki belirli konumları vurgulamak için kullanılır.

  • Kullanılan API: google.maps.Marker (Maps JavaScript API'den) ve google.maps.marker.AdvancedMarkerElement ile google.maps.marker.PinElement (Maps JavaScript API'nin Marker Kitaplığı'ndan)
  • Amaç:
    • google.maps.Marker: İlk sürüklenebilir işaretçi için kullanılır (draggable, sağlanan kodda false olarak ayarlanmış olsa da bu işaretçinin özelliğidir) ve bölüm 3'te açıklandığı gibi temel alt hedef işaretçileri için kullanılır.
    • AdvancedMarkerElement ve PinElement: Daha belirgin görsel gezinme noktası işaretçileri için kullanılır. İşaretçinin iğnesinin özel olarak stilize edilmesine olanak tanır.
  • Önemli Parametreler:
    • position: İşaretçinin yerleştirileceği LatLng koordinatları.
    • map: İşaretçinin görüntüleneceği harita örneği.
    • title: İşaretçinin üzerine gelindiğinde görüntülenen metin.
    • icon: google.maps.Marker için özel simgelere izin verir (ör. google.maps.SymbolPath.CIRCLE ile özel renkler).
    • content: AdvancedMarkerElement için bu, önceden stillendirilmiş pinler için PinElement dahil olmak üzere özel HTML içeriğinin yerleştirilmesine olanak tanır.
    • Görsel özelleştirme için PinElement parametreleri: background, borderColor, glyphColor, scale.

6. Bina Anahatlarını Görüntüleme

Uygulama, binaların kapladığı alanı görsel olarak gösterebilir.

  • Kullanılan API: google.maps.Data (Maps JavaScript API'den)
  • Amaç: Bina ana hatları gibi coğrafi verileri görüntülemek (Coğrafi Kodlama API'sinin extra_computations display_polygon olarak döndürülür).
  • Önemli Parametreler:
    • map: Veri katmanının uygulandığı harita örneği.
    • style: GeoJSON özelliklerinin görsel görünümünü tanımlar (ör. strokeColor, fillColor, fillOpacity).
    • addGeoJson(): GeoJSON verilerini katmana ekleme yöntemi.

7. Harita Sınırları ve Yakınlaştırma

Harita görünümünün tüm alakalı konumları kapsadığını doğrulayın.

  • Kullanılan API: google.maps.LatLngBounds (Maps JavaScript API'den)
  • Amaç: Haritanın görüntü alanını, bir coğrafi nokta koleksiyonuna (ör. ana yer ve tüm alt hedefleri) uyacak şekilde dinamik olarak ayarlamak için kullanılır.
  • Temel Yöntemler:
    • extend(location): Sınırlara LatLng noktası ekler ve gerekirse bunları genişletir.
    • fitBounds(bounds): Haritanın merkezini ve yakınlaştırma düzeyini, LatLngBounds nesnesiyle tanımlanan alanın tamamını gösterecek şekilde ayarlar.

Bu Google Maps Platform API'lerini birleştiren uygulama, yerleri arama, ayrıntılarını görüntüleme ve alt hedefler ile bina planları gibi ilgili coğrafi bilgileri görselleştirme konusunda kapsamlı ve etkileşimli bir deneyim sunar.

Uygulamayla İlgili Dikkat Edilmesi Gerekenler Bu özelliğin tüm havaalanı bölgelerinde çalışmadığını ve (havaalanı terminali) verilerinin kullanılabilirliğine tabi olduğunu unutmayın.

Kaynaklar Geocoding API Places API Maps JavaScript API

Yazarlar: