Skill Level
Intermediate
Categories
Web Development
Reading Time
9 minutes, 56 seconds
Technology
HTML, JavaScript
Framework
No framework
Library
GMaps.js
Implementasi HTML5 Geolocation, Mendeteksi Lokasi Pengguna

HTML5 memiliki banyak sekali fitur-fitur yang mendukung web developer dalam pengembangan website agar menjadi lebih atraktif, fitur-fitur tersebut memiliki fungsi dan manfaatnya masing-masing. Salah satu fitur HTML5 yang membantu adalah Geolocation. Geolocation akan membantu kita untuk mengetahui lokasi pengguna berdasarkan koordinat, dengan koordinat tersebut kita dapat melakukan visualisasi lokasi pengguna menggunakan map.

Pada tutorial ini kita akan melakukan bukan sesuatu yang baru, karena mungkin kamu pernah melakukannya sebelumnya, yang akan kita lakukan ditutorial ini adalah mengambil lokasi pengguna dan menampilkannya ke dalam bentuk map. Pengguna di sini berarti orang yang mengunjungi website yang kita sisipkan Geolocation.

Sebelum memulai ada hal yang perlu kamu ketahui yaitu HTML5 Geolocation ini jika dijalankan pada browser Google Chrome harus menggunakan HTTPS. Jadi, agar bisa diuji menggunakan komputer lokal maka disarankan menggunakan browser selain Google Chrome, misal Firefox, Opera atau yang lainnya. Dalam kasus ini saya menggunakan Firefox.

Let’s Go!

Pertama, kita akan menguji apakah HTML5 Geolocation API tersedia pada browse atau tidak.

<script>
  if("geolocation" in navigator) {
    console.log('Geolocation tersedia, bosque!');
  }else{
    console.log('Geolocation tidak tersedia pada browser kamu!');
  }
</script>

Dengan menggunakan kode di atas, jika browser yang kita gunakan mendukung HTML5 Geolocation maka akan menampilkan output.

Geolocation tersedia, bosque!

Jika tidak mendukung maka akan menampilkan output.

Geolocation tidak tersedia pada browser kamu!

Jika HTML5 Geolocation tidak tersedia maka kemungkinan kamu perlu memperbarui versi browser yang kamu gunakan. Karena, HTML5 Geolocation bekerja pada beberapa browser seperti yang telah disebutkan di dibawah ini.

API Google Chrome Microsoft Edge Firefox Safari Opera
Geolocation 5.0 – 49.0 (http)
50.0 (https)
9.0 3.5 5.0 16.0

Table by W3schools.com

Ok. Berikutnya kita akan coba mengambil data koordinat yang disediakan dari API Geolocation tersebut melalui callback dari method getCurrentPosition().

<script>
  if("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(function(position) {
      console.log(position);
    });
  }
</script>

Ketika kita menjalankan kode di atas maka browser akan bertanya apakah kita mengizinkan kode tersebut mengambil data lokasi kita atau tidak.

Kemudian jika kita mengizinkan berbagi lokasi pada browser maka pada console akan terlihat seperti berikut.

Sampai sini kita sudah mendapatkan data koordinat pengguna. Berikutnya kita akan melakukan sesuatu yang menyenangkan, yaitu data koordinat tadi akan kita visualisasikan menjadi map. Dalam kasus ini kita akan menggunakan library Gmaps.js dan membutuhkan API Key Google Maps. Untuk mendapatkan API Key Google Maps kamu dapat pergi ke halaman ini dan untuk mendapatkan library Gmaps.js silakan pergi ke halaman ini.

Sekarang kita akan membuat struktur HTML-nya terlebih dahulu.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5 Geolocation</title>
  <style>
    body {
      margin: 0;
      text-align: center;
    }
    #map {
      margin-top: 20px;
      width: 400px;
      height: 400px;
      background-color: #f9f9f9;
      display: none;
    }
  </style>
</head>
<body>
  <h1>HTML5 Geolocation</h1>
  <p>Tekan tombol di bawah untuk mendeteksi lokasi Kamu</p>
  <div>
    <button id="detect">Dapatkan Lokasi</button>
  </div>
  <div id="map"></div>

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_KAMU"></script>
  <script src="gmaps.js"></script>
</body>
</html>

Pada kode di atas terlihat bahwa map akan muncul ketika tombol “Dapatkan Lokasi” diklik dan jangan lupa ubah juga API_KEY_KAMU dengan API Key yang telah kamu dapatkan. Elemen dengan id map berfungsi untuk menampilkan map nantinya.

Perlu diingat juga, dalam kasus ini kita tidak menggunakan jQuery ataupun library lain untuk menuliskan kode JavaScript, tetapi kita akan menggunakan native JavaScript. Jadi, kodenya akan sedikit agak panjang.

Setelah menulis struktur HTML, kita akan mencoba tombol “Dapatkan Lokasi”.

<script>
document.getElementById("detect").addEventListener("click", () => {
  console.log("Hello!");
});
</script>

Letakkan kode tersebut sebelum tag </body>. Dengan kode tersebut ketika tombol “Dapatkan Lokasi” diklik maka akan memberikan output “Hello!” pada console browser.

Berikut ini adalah kode JavaScript untuk menampilakan lokasi pengguna berdasarkan koordinat pada map.

<script>
  document.getElementById("detect").addEventListener("click", () => {
    if("geolocation" in navigator) {
      document.getElementById("map").style.display = "inline-block";
      setTimeout(function() {
        navigator.geolocation.getCurrentPosition((result) => {
          var position = {
            lat: result.coords.latitude,
            lng: result.coords.longitude
          }
          var map = new GMaps({
            div: '#map',
            lat: position.lat,
            lng: position.lng
          });

          map.addMarker({
            position: position
          })
        });
      }, 250);
    }else{
      console.error("Geolocation tidak tersedia pada browser kamu.")
    }
  });
</script>

Sisipkan kode tersebut sebelum tag </body>. Jadi, keseluruhan kodenya menjadi seperti ini.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5 Geolocation</title>
  <style>
    body {
      margin: 0;
      text-align: center;
    }
    #map {
      margin-top: 20px;
      width: 400px;
      height: 400px;
      background-color: #f9f9f9;
      display: none;
    }
  </style>
</head>
<body>
  <h1>HTML5 Geolocation</h1>
  <p>Tekan tombol di bawah untuk mendeteksi lokasi Kamu</p>
  <div>
    <button id="detect">Dapatkan Lokasi</button>
  </div>
  <div id="map"></div>

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_KAMU"></script>
  <script src="gmaps.js"></script>
  <script>
    document.getElementById("detect").addEventListener("click", () => {
      if("geolocation" in navigator) {
        document.getElementById("map").style.display = "inline-block";
        setTimeout(function() {
          navigator.geolocation.getCurrentPosition((result) => {
            var position = {
              lat: result.coords.latitude,
              lng: result.coords.longitude
            }
            var map = new GMaps({
              div: '#map',
              lat: position.lat,
              lng: position.lng
            });

            map.addMarker({
              position: position
            })
          });
        }, 250);
      }else{
        console.error("Geolocation tidak tersedia pada browser kamu.")
      }
    });
  </script>
</body>
</html>

Fokus mulai dari baris 30 ke bawah. Penjelasannya seperti ini:

  •  document.getElementById("detect").addEventListener("click", () => { => Blok kode ini berfungsi untuk memberikan event click pada tombol dengan ID detect
  • if("geolocation" in navigator) { => Kode ini merupakan kondisi untuk menguji browser apakah Geolocation API tersedia atau tidak
  • document.getElementById("map").style.display = "inline-block"; => Blok kode ini berfungsi untuk menampilkan tag yang memiliki id map.
  • setTimeout(function() { => Merupakan fungsi JavaScript untuk memberikan jeda waktu untuk menjalankan kode JavaScript di dalamnya. Dalam kasus ini kita memberikan jeda waktu 250 millisecond untuk menjalankan kode yang berada di dalam callback pada function setTimeout()
  • navigator.geolocation.getCurrentPosition((result) => { => Blok kode ini berfungsi untuk mendapatkan koordinat dari lokasi pengguna
  • var position = { => Kode ini berfungsi untuk menampung koordinat yang didapatkan ke dalam sebuah object
  • var map = new GMaps({ => Kode ini merupakan class yang disediakan oleh library Gmaps.js untuk memulai membuat map
  • map.addMarker({ => Kode ini merupakan method yang disediakan oleh library Gmaps.js untuk menambahkan marker ke dalam map

Silakan kamu coba sendiri di browser kamu. Jika berhasil maka hasilnya seperti berikut ini.

Posisi Awal

Ketika tombol diklik

 

Kamu bisa melihat demo dan men-download source code tutorial ini melalui GitHub.

Demo | Source Code

 

Referensi:

  • https://www.w3schools.com/html/html5_geolocation.asp
  • https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation

Final Words

Pada tutorial ini kamu seharusnya sudah bisa memanfaatkan fitur HTML5 Geolocation dan membuat visualisasinya dalam bentuk map. Semoga bermanfaat.

Baca juga post berikut

Jagalah Keharmonisan Team Kamu

9 Situs Terbaik Untuk Mendapatkan Foto K...

Muhamad Nauval Azhar
6 months ago  •  Posted by
Muhamad Nauval Azhar
Junior Programmer

Pecinta Alam (Mbah dukun)

Dapatkan notifikasi untuk setiap artikel baru dan jadilah yang pertama tahu!