New!
×Close

Notifications

Disqus Logo
MASIGNCLEAN104

Cara Menampilkan Titik Terdekat Dari Lokasi Pengguna Pada Google Maps

Pembuka

Tutorial ini akan membahas mengenai bagaimana menampilkan titik/ lokasi terdekat dari lokasi pengguna saat ini yang diambil secara langsung, bisa lihat tutorial mengenai Cara Menampilkan Lokasi Pengguna Menggunakan Google Maps Geolocation. Cara kerjanya adalah dengan menghitung jarak setiap lokasi pada titik pengguna yang berada pada lingkaran (Circles). Setelah dihitung maka lokasi yang terdekat dan berada pada lingkaran akan ditampilkan ke dalam peta.
Cara Menampilkan Titik Terdekat Dari Lokasi Pengguna Pada Google Maps 1
Gambar 1

Pembahasan

Silahkan gunakan file pada tutorial sebelumnya mengenai geolocation, karena kita tidak akan merubah banyak kode program. Pertama tambahkan beberapa variabel sebelum fungsi initMap(), tepat setelah variabel output.
Pada variabel lokasi, saya menggunakan beberapa contoh data lokasi dalam bentuk array. Selanjutnya tambahkan fungsi getRadius() setelah fungsi initMap(), berikut kode program yang ada pada fungsi getRadius().
Fungsi getRadius ini akan aktif ketika ada perintah click pada elemen radio, sehingga value dari radio akan di proses dan menampilkan Circles berdasarkan value dari radio. Pada fungsi ini pertama kali adalah mendefinisikan dan mendeklarasikan setiap variabel yang akan digunakan. Selanjutnya mengecek lokasi awal berdasaran data latitude dan longitude posisi pengguna. Setelah data pengguna terdeteksi, Circles pada google maps akan di buat berdasarkan value pada radio. Dalam hal ini jarak yang digunakan adalah meter. Setelah Circles di bentuk, selanjutnya menghitung posisi marker lain dengan posisi pengguna menggunakan library geometry yaitu spherical.computeDistanceBetween. Dari hasil perhitungan inilah marker dapat ditentukan apakah dekat dengan pengguna atau tidak, atau marker berada di dalam lingkaran atau tidak.

Berikutnya pada bagian html, silahkan tambahkan kode html berikut sebelum tag output atau setelah tag map.
Seperti yang saya jelaskan sebelumnya kita menggunakan library geometry pada google maps, maka kita akan tambahkan pada source Google Map Api nya sehingga menjadi seperti kode dibawah.
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=API_KEY_KAMU&callback=initMap&libraries=geometry"></script>
Silahkan kamu coba kode di atas, jika berhasil maka akan seperti gambar di bawah ini.
Cara Menampilkan Titik Terdekat Dari Lokasi Pengguna Pada Google Maps 2
Gambar 2

Penutup

Sekian tutorial Cara Menampilkan Titik Terdekat Dari Lokasi Pengguna Pada Google Maps semoga dapat bermanfaat. Seperti biasa silahkan kamu kembangkan lagi, bisa menggunakan database atau menampilkan posisi terdekat secara realtime.
Share This :