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 merkezidir. 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

Bunu nasıl başardığını anlatalım:

Havaalanı/Mekan Arama: Kullanıcılar ana bir konumu (ör. "Indira Gandhi International Airport") kullanarak Google Yerler Otomatik Tamamlama girişini kullanır. 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 Eşleme: Komut dosyası, ana konumun ve alt hedeflerinin koordinatlarını bulmak için Coğrafi Kodlama API'sini 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çisine tıklandığında, işaret vurgulanır (yeşile döner) ve adını ve diğer mevcut ayrıntıları (adres veya tür gibi) gösteren bir Bilgi Penceresi açılır; bu da kullanıcının doğru belirli noktayı seçtiğini onaylamasına olanak tanır. Bağlamsal Görünüm: Harita, tüm ilgili işaretçilerin (ana konum + alt hedefler) açıkça görünür olduğunu doğrulamak için görünümünü (fitBounds) otomatik olarak ayarlar.

Havaalanı Navigasyon Uygulamasında Google Haritalar Platformu API'leri

Bu belgede, sağlanan "Havalimanı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.
  • Temel 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 stili için benzersiz tanımlayıcı.

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.
  • Temel 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ı (görünen adı, adresi, türleri ve en önemlisi subDestinations) almak için kullanılır (ö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ı yoluyla)
  • 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 yer ve alt hedefleri üzerinde 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.
  • Temel 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 Library'sinden)
  • 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.
  • Temel 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 özel renklerle).
    • 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'sinden extra_computations GeoJSON display_polygon olarak döndürülür).
  • Temel 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 puan 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 Haritalar Platformu API'lerini bir araya getiren uygulama, yerleri aramak, ayrıntılarını görüntülemek ve alt hedefler ve bina ana hatları gibi ilgili coğrafi bilgileri görselleştirmek için kapsamlı ve etkileşimli bir deneyim sunuyor.

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: