Memperkenalkan elemen HTML <geolocation>

Mari Viana

Minh Le

Thomas Steiner

Dipublikasikan: 13 Januari 2026

Mulai Chrome 144, Anda dapat menggunakan elemen HTML <geolocation> baru. Elemen ini mewakili perubahan besar dalam cara situs meminta data lokasi pengguna—beralih dari perintah izin yang dipicu skrip ke pengalaman deklaratif yang berorientasi pada tindakan pengguna. Hal ini mengurangi kode boilerplate yang diperlukan untuk menangani status dan error izin, serta memberikan sinyal yang lebih kuat tentang maksud pengguna, yang membantu menghindari intervensi browser (seperti pemblokiran senyap).

Peluncuran ini adalah hasil pengujian dunia nyata yang ekstensif dan diskusi yang ketat dengan komunitas standar web. Untuk memahami kegunaan elemen ini, penting untuk memeriksa histori pengembangannya dan data yang mendorong desainnya.

Dari <permission> generik hingga <geolocation> spesifik

Elemen <geolocation> adalah evolusi terbaru dari inisiatif Kontrol Izin yang Disematkan di Halaman, yang awalnya diusulkan sebagai elemen <permission> generik dengan atribut type (lihat penjelasan asli). Nilai atribut jenis (misalnya, "geolocation") akan menentukan jenis izin yang diminta. Misalnya, proposal awal mencakup nilai seperti kamera, mikrofon, dan geolokasi.

Validasi konsep

Kami menjalankan uji coba origin untuk elemen <permission> generik dari Chrome 126 hingga 143. Tujuan uji coba ini adalah untuk menguji hipotesis bahwa tombol khusus dalam konteks akan meningkatkan kepercayaan dan pengambilan keputusan pengguna.

Hasil uji coba origin ini mendukung validasi konsep inti ini:

• Zoom melaporkan penurunan error pengambilan kamera atau mikrofon sebesar 46,9% (seperti pemblokir tingkat sistem) dengan menggunakan elemen tersebut untuk memandu pengguna melakukan pemulihan.
• Immobiliare.it mengalami peningkatan 20% dalam alur geolokasi yang berhasil.
• ZapImóveis mengamati rasio keberhasilan 54,4% pada pengguna yang pulih dari status "sebelumnya diblokir" saat elemen ditampilkan.

Pendefinisian ulang desain

Meskipun konsepnya terbukti berhasil, implementasinya memerlukan penyempurnaan. Masukan dari vendor browser—termasuk Apple (Safari/WebKit) dan Mozilla (Firefox)—menunjukkan bahwa elemen "satu ukuran untuk semua" menimbulkan kompleksitas yang signifikan terkait perilaku kemampuan unik.

Oleh karena itu, kami beralih dari kontrol izin generik ke elemen spesifik per kemampuan yang ditargetkan (lihat diskusi WICG). Elemen <geolocation> adalah kontrol khusus pertama yang diluncurkan. Selain itu, kami juga mengembangkan elemen <usermedia> khusus (untuk akses kamera dan mikrofon), yang memiliki uji coba origin terpisah.

Tidak seperti proposal asli, yang berfokus pada pengelolaan status izin (yaitu, izinkan atau tolak), elemen baru ini berfungsi sebagai mediator data, yang secara efektif menggantikan kebutuhan untuk memanggil API JavaScript secara langsung untuk sebagian besar kasus penggunaan.

Tabel ini menjelaskan perbedaan antara Geolocation JavaScript API, elemen <permission>, dan elemen <geolocation> baru.

Fitur	Geolocation JS API	Elemen HTML	Elemen HTML
Peristiwa Pemicu untuk Dialog Izin	Eksekusi skrip imperatif (getCurrentPosition)	Pengguna mengklik elemen yang dikontrol browser	Pengguna mengklik elemen yang dikontrol browser
Peran Browser	Memutuskan perintah berdasarkan status	Bertindak sebagai perantara izin	Bertindak sebagai perantara data
Tanggung Jawab Situs	Memanggil JavaScript API secara manual, menangani callback & mengelola error izin	Terapkan API geolocation setelah izin diberikan	Memproses peristiwa location
Sasaran Inti	Akses lokasi dasar	Permintaan izin	Permintaan izin dan akses lokasi

Mengapa menggunakan elemen <geolocation>?

Saat ini, alur geolokasi mengandalkan Geolocation API, yang memicu dialog izin yang dapat mengganggu pengguna jika dipicu di luar konteks atau bahkan saat pemuatan halaman. Yang penting, mengandalkan perintah imperatif ini menjadi kurang layak karena intervensi browser. Misalnya, Chrome secara aktif memblokir permintaan izin jika pengguna telah menutup dialog tiga kali, sehingga menerapkan pemblokiran senyap sementara yang awalnya berlangsung selama satu minggu. Artinya, kode lama yang mencoba memicu perintah mungkin gagal secara diam-diam, sehingga pengguna mengalami pengalaman yang rusak dan tidak ada cara yang jelas untuk mengaktifkan fitur tersebut. Selain itu, perintah standar sering kali tidak memiliki konteks. Jika muncul perintah yang tidak terduga, pengguna dapat memblokirnya secara refleks atau tidak sengaja, tanpa menyadari bahwa keputusan ini akan membuat pemblokiran permanen yang sulit dibatalkan. Kesenjangan konteks ini—bukan fitur itu sendiri—adalah penyebab utama tingginya tingkat penolakan.

Elemen <geolocation> menyelesaikan masalah kesenjangan konteks dengan memastikan permintaan benar-benar dimulai oleh pengguna. Model ini memberikan tiga keunggulan yang berbeda:

• Maksud dan waktu yang jelas: Dengan mengklik tombol gunakan lokasi, pengguna secara eksplisit menandakan maksudnya untuk menggunakan lokasinya pada saat tertentu. Hal ini menandakan bahwa mereka memahami nilai dan secara aktif ingin menggunakan lokasi, sehingga mengubah potensi pemblokiran menjadi interaksi yang berhasil.
• Pemulihan yang disederhanakan: Jika pengguna sebelumnya memblokir akses lokasi saat menjelajahi situs (mungkin secara tidak sengaja atau karena kurangnya konteks), mengklik elemen akan memicu alur pemulihan khusus. Hal ini membantu mereka mengaktifkan kembali lokasi pada saat mereka benar-benar ingin menggunakan lokasi, tanpa kesulitan membuka setelan situs browser.
• Pembaruan otomatis: Jika izin sudah diberikan, mengklik elemen akan berfungsi sebagai tombol muat ulang, yang akan mengambil data baru secara langsung tanpa meminta izin ulang.

Penerapan

Mengintegrasikan elemen memerlukan boilerplate yang jauh lebih sedikit daripada JavaScript API. Daripada mengelola callback dan status error secara manual, developer dapat menambahkan tag ke halaman dan memproses peristiwa onlocation.

<geolocation
  onlocation="handleLocation(event)"
  autolocate
  accuracymode="precise">
</geolocation>

function handleLocation(event) {
  // Directly access the GeolocationPosition object on the element
  if (event.target.position) {
    const { latitude, longitude } = event.target.position.coords;
    console.log("Location retrieved:", latitude, longitude);
  } else if (event.target.error) {
    console.error("Error:", event.target.error.message);
  }
}

Atribut dan properti utama

• autolocate: Otomatis mencoba mengambil lokasi saat elemen dimuat, tetapi hanya jika status izin saat ini sudah mengizinkannya (mencegah munculnya dialog yang tidak terduga).
• accuracymode: Menerima nilai "precise" atau "approximate", yang sesuai dengan opsi enableHighAccuracy standar.
• watch: Mengalihkan perilaku agar cocok dengan watchPosition(), memicu peristiwa secara terus-menerus saat pengguna bergerak.
• position: Properti hanya baca pada elemen DOM yang menampilkan objek GeolocationPosition setelah tersedia.
• error: Properti hanya baca yang menampilkan GeolocationPositionError jika permintaan gagal.

Demo elemen <geolocation> yang menampilkan tiga konfigurasi utama: Permintaan Manual, Permintaan Otomatis (menggunakan autolocate), dan Tonton Lokasi (menggunakan watch). Anda dapat menguji perilaku ini di halaman demo aktif.

Catatan: Elemen HTML <geolocation> harus ada di halaman agar berfungsi, tetapi tidak perlu terlihat untuk memicu permintaan lokasi saat dimuat dengan menggunakan atribut autolocate.

Batasan gaya

Untuk memastikan kepercayaan pengguna dan mencegah pola desain yang menipu, elemen <geolocation> menerapkan batasan gaya tertentu yang serupa dengan eksperimen elemen <permission> sebelumnya. Meskipun Anda dapat menyesuaikan tombol agar sesuai dengan tema situs mereka, browser menerapkan beberapa batasan:

• Keterbacaan: Warna teks dan latar belakang diperiksa untuk memastikan kontras yang memadai (biasanya rasio minimal 3:1) agar permintaan izin selalu dapat dibaca. Selain itu, saluran alfa (opasitas) harus ditetapkan ke 1 untuk mencegah elemen menjadi transparan secara menipu.
• Penentuan ukuran dan penspasian: Elemen menerapkan batas minimum dan maksimum untuk lebar, tinggi, dan ukuran font. Margin negatif atau offset garis luar dinonaktifkan untuk mencegah elemen tertutup secara visual atau tumpang-tindih dengan konten lain secara menipu.
• Integritas visual: Efek distorsi terbatas—misalnya, transformasi hanya mendukung terjemahan 2D dan penskalaan proporsional.
• Class pseudo CSS: Elemen mendukung gaya berbasis status, seperti :granted (saat izin aktif).

Strategi peningkatan progresif

Kami memahami bahwa menstandardisasi elemen HTML baru adalah proses bertahap. Namun, developer dapat menggunakan elemen <geolocation> hari ini tanpa merusak kompatibilitas bagi pengguna di browser lain.

Elemen ini didesain untuk menurunkan kualitas secara halus. Browser yang tidak mendukung elemen <geolocation> akan memperlakukannya sebagai [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement). Yang penting, jika browser mendukung elemen, browser tidak akan merender elemen turunan. Hal ini memungkinkan penulisan HTML dengan bersih untuk browser yang didukung dan tidak didukung.

Pola penggantian kustom

Jika ingin mengontrol sepenuhnya pengalaman penggantian sendiri, Anda dapat menggunakan elemen turunan seperti tombol yang Anda hubungkan dengan Geolocation API JavaScript biasa.

<geolocation onlocation="updateMap()">
  <!-- Fallback contents if the element is not supported -->
  <button onclick="navigator.geolocation.getCurrentPosition(updateMap)">
    Use my location
  </button>
</geolocation>

Polyfill

Atau, Anda dapat menginstal polyfill dari npm yang secara transparan dan otomatis menggantikan semua kemunculan <geolocation> dengan elemen kustom <geo-location> (perhatikan tanda hubungnya) yang didukung oleh Geolocation API JavaScript biasa. Jika browser mendukung elemen <geolocation>, polyfill tidak akan melakukan apa pun. Lihat demo ini yang menunjukkan cara kerja polyfill. Kode sumber ada di GitHub.

if (!('HTMLGeolocationElement' in window)) {
  await import('https://unpkg.com/geolocation-element-polyfill/index.js');
}

<geolocation onlocation="updateMap()"></geolocation>

Deteksi fitur

Untuk logika yang lebih kompleks, Anda dapat mendeteksi dukungan secara terprogram menggunakan antarmuka:

if ('HTMLGeolocationElement' in window) {
  // Use modern <geolocation> element logic
} else {
  // Fallback to legacy navigator.geolocation API
}

Rangkuman

Kami tidak sabar untuk melihat cara developer menerapkan skenario percobaan ulang lokasi yang berperforma lebih baik dengan menggunakan elemen HTML <geolocation> baru. Hal ini menunjukkan pergeseran ke arah elemen khusus kemampuan yang disesuaikan dengan cara pengguna menggunakan web saat ini.

Untuk kasus penggunaan izin lainnya, mulai Chrome 144, Anda dapat bergabung dalam uji coba origin elemen HTML <usermedia>, yang memberikan manfaat ergonomis yang sama untuk kamera dan mikrofon.

Link terkait

• Elemen <geolocation> di Status Platform Chrome
• Penjelasan Elemen HTML Geolocation
• Halaman demo
• Posisi Standar Mozilla
• Posisi Standar WebKit

Ucapan terima kasih

Dokumen ini ditinjau oleh Andy Paicu, Gilberto Cocchi, dan Rachel Andrew.