BLANTERORBITv102

    Cara Menampilkan Lokasi Pengguna Menggunakan Google Maps Geolocation

    Sabtu, 30 Juni 2018

    Pembuka

    Faktanya lokasi pengguna dapat diambil berdasarkan kekuatan sinyal yang dipakai, jarak device dengan tower provider, ip address atau GPS. Salah jika lokasi di tentukan dan terbaca karena pemindaian dari satelit yang ada diluar angkasa (hehe). Geolokasi sendiri ada pada perangkat yang mendukung HTML5, jika tidak support HTML5 ya sungguh disayangkan (tetap ada alternatif). Pada tutorial Cara Menampilkan Lokasi Pengguna Menggunakan Google Maps Geolocation ini, saya akan coba implementasikan penggunaan geolokasi di dalam Google Maps Api.
    Cara Menampilkan Lokasi Pengguna Menggunakan Google Maps Geolocation 1
    Gambar 1

    Pembahasan

    Kita akan membuat tutorial ini menyesuaikan pada tutorial sebelunya mengenai rute, namun pada file yang berbeda dengan assets yang sama. Buatlah file baru dengan nama goelocation.html, kemudian gunakan assets css dan javascript yang sama di file ini. Tepat setelah </body> kamu bisa tambahkan kode javascript berikut.
    var map, infoWindow,geocoder,marker,accuracyStatus;
    var output = document.getElementById("output");
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: 0.3439242, lng:102.3072246}
        });
        
        infowindow = new google.maps.InfoWindow();
    
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
            if(position.coords.accuracy<100){
               accuracyStatus = "<strong style="color:green;"><span class="glyphicon glyphicon-ok"></span>Akurasi : "+position.coords.accuracy.toFixed(2)+" m (Bagus)</strong>";
            }
            else{
               accuracyStatus = "<strong style="color:red;"><span class="glyphicon glyphicon-warning-sign"></span>Akurasi : "+position.coords.accuracy.toFixed(2)+" m (Lemah)</strong>";
            }
            var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude,
            };
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({'latLng': pos}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setZoom(15);
                    map.setCenter(pos);
                    marker = new google.maps.Marker({
                        position: pos,
                        map: map,
                        animation: google.maps.Animation.BOUNCE,
                    });
    
                    var infowindowText = "<div class='text-center'><strong>Posisi Saat Ini</strong><br />"+results[3].formatted_address+ " <br/> Lat : " + pos.lat.toFixed(5)+ " |  Long : " + pos.lng.toFixed(5)+ "<br/>" + accuracyStatus+"<br/>"+ '</strong></div>';
                    infowindow.setContent(infowindowText);
                    infowindow.open(map, marker);
                    marker.addListener('click',function() {
                       infowindow.open(map,marker);
                    });
                    output.innerHTML = results[0].formatted_address+"<br>Latitude : <span id='latitude'>"+pos.lat+"</span><br>Longitude : <span id='longitude'>"+pos.lng+"</span>";
                }
            });
            }, function() {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
          handleLocationError(false, infoWindow, map.getCenter());
        }
    }
    
    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              '<span class="alert alert-danger">Error: The Geolocation service failed.</span>' :
                              '<span class="alert alert-danger">Error: Your browser doesn't support geolocation.</span>');
        infoWindow.open(map);
    }
    Kode navigator.geolocation ini yang untuk mendeteksi geolokasi pada browser, sedangkan getCurrentPosition digunakan untuk mengambil posisi pengguna. Sedangkan untuk mendapatkan detail dari lokasi kita bisa menggunakan Geocoder pada Google Maps API.
    Selanjutnya di dalam <body>disini</body>  silahkan tambahkan tag html berikut.
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card bg-dark">
                  <div class="card-header text-white text-center"><h4>Mengambil Posisi User Menggunakan Google Maps Api Geolocation</h4></div>
                  <div class="card-body">
                    <div id="map"></div>
                    <br>
                    <p class="card-text text-white" id="output"></p>
                  </div>
                </div>
                
            </div>
        </div>
    </div>
    Untuk css tambahan saja , silahkan tambakan sebelum </head>
    <style>
        html { position: relative; height: 100%; }
        body { margin-top: 10px; } #map { margin-top: 0px; width: 100%; height: 400px;border-radius: 10px}
    </style>
    Jika berhasil maka akan ditunjukan seperti gambar di bawah, pastikan juga browser anda mengizinkan untuk mengakses lokasi.
    Cara Menampilkan Lokasi Pengguna Menggunakan Google Maps Geolocation 2
    Gambar 2

    Penutup

    Sekian tutorial Cara Menampilkan Lokasi Pengguna Menggunakan Google Maps Geolocation, semoga tutorial ini dapat bermanfaat. Saya sangat menyarankan untuk mengembangkan kode program di atas, karena kode program di atas hanya konsep dasar dari penggunaan fungsi geolocation. Apabila masih ada kendala silahkan berdiskusi melalui kolom komentar.

    Terimakasih sudah berkesempatan untuk menimba ilmu dari blog JSC, semoga ilmu yang di share dapat bermanfaat. Jika ada pertanyaan mengenai ilmu yang terkait ataupun tidak, mari kita berdiskusi di dalam kolom komentar ini.

    Keep Learning and Keep Sharing

    1. permisi bg, mau nanya tadi sudah saya jalankan terdapat error : SyntaxError: unexpected token: identifier

      pada line

      ditunggu jawabanya bg. dan terimakasih sebelumnya.

      BalasHapus
    2. ok udah solved bg. artikelnya yang bermanfaat bg (y)

      BalasHapus
      Balasan
      1. maaf lama,.. selamat kalau sudah berhasil :-d ...

        Hapus
    3. bang saya dah copy paste untuk java scriptnya, itu kenapa banyak yg eror ; unexpected ya, cara solve gimana? saya newbie bang

      BalasHapus
    4. Bang pakai plugin js apa ya ?

      BalasHapus