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.

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.

var radius_circle;
var markerLokasiLain = [];
var lokasi = [
    {name: "Waroeng Six", lat: 0.4698576, lng: 101.3689378},
    {name: "Pondok Pesantren", lat: 0.4734302, lng: 101.3983134},
    {name: "Kolam Renang", lat: 0.4677678, lng: 101.3692093},
    {name: "Bakso Bintang Merpati", lat:0.4718068, lng: 101.3703589},
    {name: "Dalas Fried Chicken", lat:0.4700459, lng: 101.3667134},
    {name: "Garuda Jaya Motor", lat: 0.4680818, lng: 101.3674838},
    {name: "Giant", lat: 0.4648009, lng: 101.3804451},
];

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().

function getRadius(data){
    var i;
    var radius_km = Number(data.value);
    var lat = Number($("#latitude").text());
    var lng = Number($("#longitude").text());
    var pos = {
        lat: lat,
        lng: lng,
    };
    if (radius_circle) {
        radius_circle.setMap(null);
        radius_circle = null;
    }
    for (i = 0; i < markerLokasiLain.length; i++) {
        if (markerLokasiLain[i]) {
            markerLokasiLain[i].setMap(null);
            markerLokasiLain[i] = null;
        }
    }
    geocoder.geocode({'latLng': pos}, function(results, status) {
        var address_lat_lng = results[0].geometry.location;
        radius_circle = new google.maps.Circle({
            center: { lat: lat, lng:lng },
            strokeColor: '#2980b9',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#34495e',
            fillOpacity: 0.35,
            radius: radius_km * 1000,
            clickable: false,
            map: map,
        });

        if (radius_circle) map.fitBounds(radius_circle.getBounds());

        for (var j = 0; j < lokasi.length; j++) {
            (function (location) {
            var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng);
            var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng);
            var formatJarak;
            if (distance_from_location <= radius_km * 1000) {
                if (distance_from_location <= 1000) {
                    formatJarak = distance_from_location.toFixed(2)+" Meter";
                }else {
                    formatJarak = (distance_from_location / 1000).toFixed(2)+" Kilometer";
                }
                var new_marker = new google.maps.Marker({
                    position: marker_lat_lng,
                    map: map,
                    title: location.name
                });       
                
                google.maps.event.addListener(new_marker, 'click', function () {
                    if(infowindow){
                        infowindow.setMap(null);
                        infowindow = null;
                    }
                    infowindow = new google.maps.InfoWindow({ 
                        content: '
'+location.name +'
' + " Dengan Jarak " + formatJarak + " Dari Lokasi Utama",
                        size: new google.maps.Size(150,50),
                        pixelOffset: new google.maps.Size(0, -30), 
                        position: marker_lat_lng, map: map
                    });
                });
            markerLokasiLain.push(new_marker);
            }
            })(lokasi[j]);
        }
    });
}

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.

    

        
        1 Kilometer
    
    

        
        2 Kilometer
    
    

        
        4 Kilometer
    
    

        
        7 Kilometer
    

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.

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.