Peningkatan Navigasi ke bandara

gambar

Bandara adalah kompleks multi-terminal yang besar dan navigasi yang akurat sangat penting untuk kedatangan dan keberangkatan tepat waktu. Google Maps Geocoding API biasanya akan menampilkan koordinat (Lintang/Bujur) yang dalam sebagian besar kasus adalah sentroid kompleks bandara besar. Aplikasi ini adalah alat interaktif yang dirancang khusus untuk membantu pengguna menentukan dan memvisualisasikan lokasi yang akurat dalam tempat yang lebih besar dan kompleks seperti terminal tertentu atau titik penjemputan/pengantaran di dalam Bandara.

gambar

Berikut cara kerjanya:

Penelusuran Bandara/Tempat: Pengguna memulai dengan menelusuri lokasi utama (misalnya, "Bandara Internasional Indira Gandhi") menggunakan input Google Places Autocomplete, yang dibatasi untuk India.

Penemuan Sub-Lokasi: Setelah lokasi utama dipilih, skrip menggunakan Google Places API untuk mengambil detail, termasuk semua "sub-tujuan" yang tercantum dan terkait dengan tempat tersebut (seperti Terminal 1, Terminal 3, gerbang tertentu, dll., jika tersedia di data Google).

Pemetaan Visual: Skrip menggunakan Geocoding API untuk menemukan koordinat lokasi utama dan sub-tujuannya.

Kemudian, peta akan menampilkan lokasi utama dan menempatkan penanda yang berbeda dan dapat diklik (lingkaran biru) di peta untuk setiap sub-tujuan yang diidentifikasi.

Identifikasi yang Akurat: Mengklik penanda sub-tujuan akan menandainya (berubah menjadi hijau) dan membuka InfoWindow yang menampilkan nama dan detail lainnya yang tersedia (seperti alamat atau jenis), sehingga pengguna dapat mengonfirmasi bahwa mereka telah memilih titik tertentu yang benar. Tampilan Kontekstual: Peta secara otomatis menyesuaikan tampilannya (fitBounds) untuk memastikan semua penanda yang relevan (lokasi utama + sub-tujuan) terlihat jelas.

API Google Maps Platform di Aplikasi Navigasi Bandara

Dokumen ini menjelaskan API utama Google Maps Platform dan parameter yang digunakan dalam aplikasi demo "Navigate to Airport" yang disediakan. Aplikasi ini memanfaatkan beberapa layanan untuk menyediakan tampilan peta, penelusuran tempat, informasi tempat yang mendetail, dan insight lokasi lanjutan.

1. Inisialisasi dan Tampilan Peta

Dasar aplikasi ini adalah peta interaktif itu sendiri.

  • API yang Digunakan: google.maps.Map (dari Maps JavaScript API)
  • Tujuan: Untuk membuat dan menampilkan peta interaktif di halaman web.
  • Parameter Utama:
    • center: Menentukan pusat geografis awal peta. Di aplikasi ini, awalnya disetel ke koordinat Delhi ({ lat: 28.461835685621395, lng: 77.05004035761647 }).
    • zoom: Menetapkan tingkat zoom awal peta. DEFAULT_ZOOM_LEVEL (15) digunakan untuk tampilan close-up.
    • mapId: ID unik untuk gaya peta yang dikonfigurasi di Konsol Google Cloud.

2. Place Search dan Autocomplete

Fungsi kotak penelusuran didukung oleh Places API.

  • API yang Digunakan: google.maps.places.Autocomplete (dari Places Library di Maps JavaScript API)
  • Tujuan: Menyediakan penyelesaian teks prediktif untuk penelusuran geografis saat pengguna mengetik, menyarankan tempat yang relevan seperti bandara.
  • Parameter Utama:
    • input: Elemen input HTML (#search-input) tempat pengguna mengetik kueri mereka.
    • componentRestrictions: Memfilter hasil penelusuran ke negara tertentu. Di sini, { country: 'in' } membatasi hasil ke India.
    • fields: Menentukan kolom data yang akan ditampilkan untuk tempat yang dipilih. ['place_id'] digunakan pada awalnya untuk hanya mengambil ID unik tempat, sehingga mengoptimalkan transfer data.
  • Cara menggunakan Pelengkapan Otomatis
    // 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. Mengambil Informasi Tempat Mendetail dan Menangani Sub-Tujuan

Setelah tempat dipilih dari saran pelengkapan otomatis, detail yang lebih komprehensif akan diambil.

  • API yang Digunakan: Places API (melalui panggilan fetch langsung ke https://places.googleapis.com/v1/places/{placeId})
  • Tujuan: Untuk mengambil detail lengkap tentang tempat tertentu, termasuk nama tampilannya, alamat, jenis, dan yang paling penting, subDestinations-nya (misalnya, terminal individual atau area penting dalam kompleks yang lebih besar seperti bandara).
  • Parameter Utama dalam URL:
    1. {placeId}: ID unik tempat yang dipilih.
    2. fields: Menentukan kolom data yang tepat untuk diambil. Aplikasi meminta id, displayName, subDestinations, types, dan formattedAddress. Hal ini sangat penting untuk mengontrol biaya dan menerima hanya data yang diperlukan.
  • Cara mendapatkan subDestinations berdasarkan lokasi
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. Geocoding dan Geocoding Terbalik: Mengambil Detail untuk Sub-Tujuan

Aplikasi menggunakan geocoding untuk dua tujuan utama: mengonversi ID tempat menjadi koordinat dan mengonversi koordinat kembali menjadi detail lokasi. Bagian ini secara khusus menyoroti cara geocoding digunakan untuk mendapatkan informasi mendetail tentang sub-tujuan.

  • API yang Digunakan: google.maps.Geocoder (dari Maps JavaScript API) dan Geocoding API (melalui panggilan fetch langsung ke https://maps.googleapis.com/maps/api/geocode/json)
  • Tujuan:
    • google.maps.Geocoder: Digunakan untuk mengonversi placeId (diperoleh dari Autocomplete atau Places API) menjadi koordinat geografis (lat, lng) dan area tampilan, sehingga peta dapat memusatkan dan melakukan zoom dengan benar pada tempat yang dipilih dan sub-tujuannya.
    • Geocoding API (fetch): Digunakan untuk geocoding terbalik (mengonversi garis lintang dan bujur menjadi alamat yang mudah dibaca) dan untuk mengambil data lokasi lanjutan seperti garis batas bangunan dan titik navigasi.
  • Parameter Utama:
    • google.maps.Geocoder.geocode():
      • placeId: ID Tempat untuk geocode.
      • location: Objek LatLng untuk geocoding balik.
    • Panggilan Geocoding API fetch:
      • latlng: Koordinat garis lintang dan bujur untuk geocoding terbalik.
      • extra_computations=BUILDING_AND_ENTRANCES: Parameter penting ini meminta data tambahan, khususnya jejak bangunan dan informasi pintu masuk, yang kemudian digunakan untuk menampilkan garis luar bangunan dan titik navigasi.

Cara menggunakan ID subDestination untuk mengambil detail lebih lanjut (misalnya, lokasi, alamat yang diformat, jenis)

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. Menampilkan Penanda

Penanda digunakan untuk menandai lokasi tertentu di peta.

  • API yang Digunakan: google.maps.Marker (dari Maps JavaScript API) dan google.maps.marker.AdvancedMarkerElement dengan google.maps.marker.PinElement (dari Marker Library Maps JavaScript API)
  • Tujuan:
    • google.maps.Marker: Digunakan untuk penanda yang dapat ditarik awal (meskipun draggable disetel ke false dalam kode yang diberikan, ini adalah bagian dari kemampuannya) dan untuk penanda sub-tujuan dasar seperti yang dijelaskan di bagian 3.
    • AdvancedMarkerElement dan PinElement: Digunakan untuk penanda titik navigasi yang lebih berbeda secara visual, sehingga memungkinkan penataan gaya kustom pin penanda.
  • Parameter Utama:
    • position: Koordinat LatLng tempat penanda akan ditempatkan.
    • map: Instance peta tempat penanda akan ditampilkan.
    • title: Teks yang ditampilkan saat mengarahkan kursor ke penanda.
    • icon: Memungkinkan ikon kustom untuk google.maps.Marker (misalnya, google.maps.SymbolPath.CIRCLE dengan warna kustom).
    • content: Untuk AdvancedMarkerElement, hal ini memungkinkan penyematan konten HTML kustom, termasuk PinElement untuk pin yang telah diberi gaya.
    • Parameter PinElement: background, borderColor, glyphColor, scale untuk penyesuaian visual.

6. Menampilkan Kerangka Bangunan

Aplikasi dapat merepresentasikan jejak bangunan secara visual.

  • API yang Digunakan: google.maps.Data (dari Maps JavaScript API)
  • Tujuan: Untuk menampilkan data geografis, seperti garis batas bangunan (ditampilkan sebagai GeoJSON display_polygon dari extra_computations Geocoding API).
  • Parameter Utama:
    • map: Instance peta tempat lapisan data diterapkan.
    • style: Menentukan tampilan visual fitur GeoJSON (misalnya, strokeColor, fillColor, fillOpacity).
    • addGeoJson(): Metode untuk menambahkan data GeoJSON ke lapisan.

7. Batas Peta dan Zoom

memverifikasi tampilan peta mencakup semua lokasi yang relevan.

  • API yang Digunakan: google.maps.LatLngBounds (dari Maps JavaScript API)
  • Tujuan: Untuk menyesuaikan area tampilan peta secara dinamis agar sesuai dengan kumpulan titik geografis (misalnya, tempat utama dan semua sub-tujuannya).
  • Metode Utama:
    • extend(location): Menambahkan titik LatLng ke batas, memperluasnya jika perlu.
    • fitBounds(bounds): Menyesuaikan pusat dan tingkat zoom peta untuk menampilkan seluruh area yang ditentukan oleh objek LatLngBounds.

Dengan menggabungkan API Google Maps Platform ini, aplikasi memberikan pengalaman yang komprehensif dan interaktif untuk menelusuri tempat, melihat detailnya, dan memvisualisasikan informasi geografis terkait seperti sub-tujuan dan garis batas bangunan.

Pertimbangan Penerapan Perhatikan bahwa fitur ini tidak berfungsi di semua area bandara dan bergantung pada ketersediaan data (terminal bandara).

Referensi Geocoding API Places API Maps JavaScript API

Penulis: