Peningkatan Navigasi ke bandara

gambar

Bandara adalah kompleks besar dengan banyak terminal 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 akan menjadi centroid kompleks bandara besar. Aplikasi ini adalah alat interaktif yang dirancang khusus untuk membantu pengguna menentukan dan memvisualisasikan lokasi yang akurat dalam kompleks yang lebih besar seperti terminal tertentu atau titik penjemputan/pengantaran di dalam Bandara.

gambar

Berikut cara aplikasi ini melakukannya:

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 akan menggunakan Google Places API untuk mengambil detail, termasuk "sub-destinasi" yang tercantum dan terkait dengan tempat tersebut (seperti Terminal 1, Terminal 3, gerbang tertentu, dll., jika tersedia dalam data Google).

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

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

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

Google Maps Platform API di Aplikasi Navigasi Bandara

Dokumen ini menjelaskan Google Maps Platform API utama dan parameternya yang digunakan dalam aplikasi demo "Navigate to Airport" yang disediakan. Aplikasi ini memanfaatkan beberapa layanan untuk menyediakan tampilan peta, penelusuran tempat, informasi tempat 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 ditetapkan 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 Pelengkapan Otomatis

Fungsi kolom penelusuran didukung oleh Places API.

  • API yang Digunakan: google.maps.places.Autocomplete (dari Library Places 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.
    • 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 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. Mengambil Informasi Tempat Mendetail dan Menangani Sub-Destinasi

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 tampilan, alamat, jenis, dan yang terpenting, subDestinations (misalnya, terminal individual atau area penting dalam kompleks yang lebih besar seperti bandara).
  • Parameter Utama di URL:
    1. {placeId}: ID unik tempat yang dipilih.
    2. fields: Menentukan kolom data yang tepat untuk diambil. Aplikasi ini meminta id, displayName, subDestinations, types, dan formattedAddress. Hal ini penting untuk mengontrol biaya dan hanya menerima 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-Destinasi

Aplikasi ini 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-destinasi.

  • 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 pandang, sehingga peta dapat berpusat dan melakukan zoom dengan benar pada tempat yang dipilih dan sub-destinasinya.
    • Geocoding API (fetch): Digunakan untuk geocoding terbalik (mengonversi lintang dan bujur menjadi alamat yang mudah dibaca) dan untuk mengambil data lokasi lanjutan seperti kerangka bangunan dan titik navigasi.
  • Parameter Utama:
    • google.maps.Geocoder.geocode():
      • placeId: ID Tempat untuk geocoding.
      • location: Objek LatLng untuk geocoding terbalik.
    • Panggilan fetch Geocoding API:
      • latlng: Koordinat 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 kerangka 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 Library Penanda Maps JavaScript API)
  • Tujuan:
    • google.maps.Marker: Digunakan untuk penanda awal yang dapat ditarik (meskipun draggable ditetapkan ke false dalam kode yang disediakan, tetapi merupakan bagian dari kemampuannya) dan untuk penanda sub-destinasi dasar seperti yang dijelaskan di bagian 3.
    • AdvancedMarkerElement dan PinElement: Digunakan untuk penanda titik navigasi yang lebih berbeda secara visual, sehingga memungkinkan 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 kursor diarahkan 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 ini dapat menampilkan jejak bangunan secara visual.

  • API yang Digunakan: google.maps.Data (dari Maps JavaScript API)
  • Tujuan: Untuk menampilkan data geografis, seperti kerangka 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 dan Zoom Peta

memverifikasi bahwa tampilan peta mencakup semua lokasi yang relevan.

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

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

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

Referensi Geocoding API Places API Maps JavaScript API

Penulis: