Cara Menghitung Jarak Antar Titik Dengan Maps JavaScript API

30 November 2021

Ada banyak hal yang dapat diketahui pengguna tentang suatu tempat hanya dengan menjelajahi peta, salah satu contohnya mencari lokasi yang terdekat dari titik pengguna berdasarkan lokasi saat ini di GPS. Dengan lokasi tersebut dapat diketahui apa jaraknya relatif dekat satu sama lain? dan bahkan kira-kira seberapa jauh suatu tempat berdasarkan skala peta. Pada artikel kali ini kita akan belajar bagaimana menghitung jarak antar Titik dengan Maps JavaScript API.

Dengan Google Maps Platform kita dapat mengambil beberapa insight dari gambar dengan mengukur berapa jarak melalui jarak garis lurus dan jarak rute yang dapat di tampilkan di atas peta Google. Masing-masing menggunakan pendekatan yang berbeda dan memecahkan masalah atau tindakan pengguna yang berbeda. 

Jadi pada artikel kali ini akan menjelaskan apa dan kapan harus menggunakan titik lokasi untuk mengukur jarak antar titik dengan Maps Javascript API, dan bagaimana memulainya.

Untuk membuat titik-titik ini, peratama-tama yang perlu dilakukan adalahmemplot beberapa jarak pada peta dengan beberapa JavaScript yang berguna, karena untuk menghitung jarak apapun membutuhkan titik A dan titik B yang biasa di sebut dengan titik awal (origin) dan titik tujuan (destination), akan di mulai dengan menambahkan dua penanda ke Google Map dasar:

https://pastebin.com/nQ9yaatE (silahkan ambil code disini untuk implementasi)

Di sini kita bisa lihat halaman peta menunjukan lokasi Central Park NYC, serta dua landmark terdekat nya yaitu; Dakota, atau mungkin yang paling terkenal sebagai daerah rumah John Lennon. Dan The Frick Collection di sebrangnya adalah titik lokasi sebuah galeri seni.

menghitung jarak Maps Javascript API ilustrasi
Source: Google Maps

Menghitung jarak garis lurus dari garis lintang dan garis bujur

Metode paling sederhana untuk menghitung jarak bergantung pada beberapa perhitungan matematika yang tampak canggih. Dikenal sebagai rumus Haversine, rumus ini menggunakan trigonometri bola untuk menentukan jarak lingkaran besar antara dua titik. 

Wikipedia memiliki lebih banyak pengertian yang membahas tentang perumusan perkiraan jarak garis lurus yang populer ini. Untuk memvisualisasikan perhitungan kita dapat menggambar Polyline di antara dua penanda. Tambahkan baris berikut setelah penanda di JavaScript:

// Draw a line showing the straight distance between the markers
  var line = new google.maps.Polyline({path: [dakota, frick], map: map});

Muat ulang peta dan akan melihat garis gelap diagonal yang menghubungkan dua penanda, dari satu sisi Central Park ke sisi lainnya. Menggunakan persamaan JavaScript dari rumus Haversine dapat menentukan panjang Polyline, jarak lurus antara dua penanda.

  • Tambahkan fungsi ini ke JavaScript, sebelum fungsi initMap:
function haversine_distance(mk1, mk2) {
      var R = 3958.8; // Radius of the Earth in miles
      var rlat1 = mk1.position.lat() * (Math.PI/180); // Convert degrees to radians
      var rlat2 = mk2.position.lat() * (Math.PI/180); // Convert degrees to radians
      var difflat = rlat2-rlat1; // Radian difference (latitudes)
      var difflon = (mk2.position.lng()-mk1.position.lng()) * (Math.PI/180); // Radian difference (longitudes)

      var d = 2 * R * Math.asin(Math.sqrt(Math.sin(difflat/2)*Math.sin(difflat/2)+Math.cos(rlat1)*Math.cos(rlat2)*Math.sin(difflon/2)*Math.sin(difflon/2)));
      return d;
    }

Fungsi menerima dua objek penanda dan mengembalikan jarak antara keduanya dalam mil. Untuk menggunakan kilometer, atur R = 6371.0710. Sebelum menerapkan rumus Haversine, fungsi mengubah titik lintang dan bujur setiap penanda menjadi radian.

  • Untuk memanggil fungsi dan melaporkan jarak di bawah peta, tambahkan kode ini di bawah Polyline di fungsi initMap:
// Calculate and display the distance between markers
  var distance = haversine_distance(mk1, mk2);
  document.getElementById('msg').innerHTML = "Distance between markers: " + distance.toFixed(2) + " mi.";

Muat peta dan akan terlihat tampilan sebagai berikut:

Sekarang kita tahu jarak garis lurus antara The Dakota dan The Frick Collection adalah 0,60 mil (dibulatkan menjadi dua tempat desimal menggunakan fungsi JavaScript to Fixed).

Tentu saja tapi terkecuali jika seekor merpati, perjalanan di antara dua lokasi tersebut kemungkinan akan lebih lama. Pandangan sekilas ke peta menunjukkan tidak ada jalan atau bahkan jalur lurus melintasi Central Park. 

Rumus Haversine berguna untuk menghitung kedekatan dasar, tetapi tidak cukup untuk banyak kasus penggunaan, terutama di dalam kota. Untuk jarak perjalanan yang lebih akurat, kita perlu menggunakan fitur lain dari Maps JavaScript API.

Baca Juga: Mengenal Lebih Dekat Google Maps API dan Maps Javascript API

Dapatkan Petunjuk Arah dengan Maps JavaScript API

Ketika jarak garis lurus tidak memadai, Anda memerlukan lebih dari sekadar rumus untuk menentukan sebuah jarak perjalanan. Petunjuk arah mengemudi adalah salah satu fitur paling populer di Google Maps, jadi tidak mengherankan jika itu juga tersedia melalui API. 

Permasalahan tersebut dapat diselesaikan dengan menggunakan Directions API untuk permintaan sisi server, atau Directions Service di Maps JavaScript API untuk permintaan sisi klien di web. Karena peta JavaScript sudah disetel, selanjutkan akan melanjutkan dengan menggunakan Layanan Petunjuk Arah.

  • Tempel kode berikut ini di akhir fungsi initMap yang dibuat:
let directionsService = new google.maps.DirectionsService();
  let directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map); // Existing map object displays directions
  // Create route from existing points used for markers
  const route = {
      origin: dakota,
      destination: frick,
      travelMode: 'DRIVING'
  }


directionsService.route(route,
    function(response, status) { // anonymous function to capture directions
      if (status !== 'OK') {
        window.alert('Directions request failed due to ' + status);
        return;
      } else {
        directionsRenderer.setDirections(response); // Add route to the map
        var directionsData = response.routes[0].legs[0]; // Get data about the mapped route
        if (!directionsData) {
          window.alert('Directions request failed');
          return;
        }
        else {
          document.getElementById('msg').innerHTML += " Driving distance is " + directionsData.distance.text + " (" + directionsData.duration.text + ").";
        }
      }
    });

Setelah panggilan berhasil ke layanan petunjuk arah, akan memiliki rute yang ditambahkan ke peta. Pesan di bawah peta juga diperluas untuk memasukkan jarak. 

Source: Google Maps

Dengan inspeksi visual yang cepat, jelas bahwa arah mengemudi jauh lebih jauh daripada jarak garis lurus, dapat menggali data yang muncul sebagai respons untuk menemukan jarak mengemudi (1,6 mil, dua setengah kali lebih jauh), serta perkiraan durasi. 

  • Berikut adalah representasi JSON dari bagian yang relevan dari respons:
"routes": [{
  "legs": [
    {
      "distance": {
        "text": "1.6 mi",
        value: 2619
      },
      {
        "duration": {
          "text": "9 mins",
          value: 516
        }
      }
    }
  ]
}]

Salah satu contoh menggunakan petunjuk arah mengemudi, juga dapat meneruskan nilai lain ke bidang travelMode di objek rute. Layanan petunjuk arah juga dapat menerima pengukuran dengan moda BICYCLING, TRANSIT, dan WALKING. 

Tips! Coba sesuaikan mode dan jalankan kode lagi untuk melihat bagaimana hasil petunjuk arah berubah.

Jarak mana yang harus digunakan?

Dua jenis jarak dalam artikel ini berguna dalam skenario yang berbeda. Untuk memberikan pengalaman terbaik kepada pengguna, Anda harus mencoba menggunakan skema masing-masing dalam situasi yang sesuai.

Pada situasi dan kondisi tertentu kita dapat menggunakan jarak garis lurus untuk membuat perhitungan cepat tanpa panggilan ke layanan eksternal. untuk fungsi tersebut harus menyertakan Haversine yang digunakan dalam tutorial ini, tetapi yang di butuhkan hanyalah koordinat peta untuk mendapatkan hasil yang akurat di dalam browser

Namun, seperti namanya, jaraknya akan menjadi garis lurus sederhana. Jalan, penghalang, dan lalu lintas tidak diperhitungkan dalam sebuah jarak tarik garis lurus.

Jarak dan rute di sisi lain, akan mengembalikan jarak di sepanjang rute, termasuk belokan yang diperlukan dan pemahaman tentang pola lalu lintas area tersebut. Karena rumitnya perhitungan ini, jarak rute memerlukan panggilan ke layanan petunjuk arah, yang juga akan mengembalikan durasi rute dan bahkan jalur untuk diplot secara visual pada peta.

Setelah mengukur jarak di seluruh wilayah atau di seluruh kota yang diperlukan, gunakan salah satu pendekatan ini untuk membantu pengguna lebih memahami lingkungan mereka dan membantu mereka membuat keputusan. 

Untuk menjelajahi lebih banyak alat untuk membantu pengguna berpindah dari satu titik ke titik yang lain untuk informasi lebih lanjut tentang Google Maps Platform, kunjungi situs web Terralogiq.

Demikian pembahasan mengenai cara menghitung jarak antar titik dengan Maps JavaScript API.

Terralogiq sebagai satu-satunya Google Maps Premier Partner di Indonesia bertujuan membantu bisnis anda untuk meningkatkan efisiensi proses bisnis dengan mengintegrasikan Google Maps Platform dan menyederhanakan penerapan Google Maps API dan SDK.

Jika Anda memerlukan bantuan dalam mengimplementasikan Google Maps Platform APIs untuk solusi bisnis aplikasi atau membutuhkan dukungan teknis dan informasi lainnya mengenai Google Maps Platform. Hubungi kami di halo@terralogiq.com atau jadwalkan untuk berkonsultasi langsung bersama kami dengan mengisi form dibawah ini:

Author Profile

Sada

Customer Solutions Consultant Terralogiq Premier Partner Google Maps Platform

|

Share this post on

Related Article