Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mengatur Lokasi Peta HTML pada GPS

Geolokasi pada HTML5 digunakan untuk berbagi lokasi dengan beberapa web dan mengetahui lokasi atau posisi nyata suatu tempat. Geolokasi secara umum digunakan untuk bisnis lokal, rumah makan, atau memperlihatkan lokasi tertentu pada peta digital. Fitur ini menggunakan JavaScript untuk memberikan latitude dan longitude ke bagian backend server. Kebanyakan web browser sudah dapat mendukung penggunaan API geolokasi. API geolokasi menggunakan object navigator global yang diperlihatkan sebagai berikut:

Sebelum mempelajari materi tentang Cara Mengatur Lokasi Peta HTML pada GPS, terlebih dahulu pelajari materi tentang: Cara Membuat List di HTML dengan Benar, Spell Check pada HTML Beserta Fungsinya, dan Cara Mengatur Warna HTML Color Style dan HSL.

Geolokasi HTML adalah kemampuan untuk mendapatkan informasi tentang lokasi geografis pengguna melalui browser web. Ini memungkinkan pengembang web untuk menyesuaikan konten atau menampilkan informasi berdasarkan lokasi geografis pengguna, seperti menunjukkan peta, memberikan informasi terkait lokasi, atau menampilkan layanan yang disesuaikan secara geografis.

var loc = navigator.geolocation

Contoh:
var loc = navigator.geolocation;
function getLoc() 
{loc.getCurrentPosition(showLoc, errHand);}

Fungsi yang telah dituliskan sebelumnya juga dapat ditulis tanpa melakukan pembuatan object navigator seperti diperlihatkan sebagai berikut:
function getlocation()
{navigator.geolocation.getCurrentPosition(showLoc, errHand);}

Menampilkan Lokasi Digital Menggunakan Geolokasi HTML: Berikut kode program untuk menampilkan lokasi terkini dengan bantuan dari latitude dan longitude menggunakan HTML geolokasi.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Lattitude and longitude

</title>

 

<style>

.mnk {

font-size:40px;

font-weight:bold;

color:#009900;

margin-left:50px;

}

 

.kucingan {

margin-left:150px;

}

 

p {

font-size:20px;

margin-left:20px;

}

</style>

</head>

 

<body>

 

<div class = "mnk">

LokasiPeta

</div>

 

<p>

Displaying location using Latitude and Longitude

</p>

 

<button class ="kucingan" onclick="getlocation()">Klik</button>

 

<p id="demo1"></p>

 

<script>

var variable1 = document.getElementById("demo1");

function getlocation()

{navigator.geolocation.getCurrentPosition(showLoc);}

 

function showLoc(pos)

{variable1.innerHTML = "Latitude: "

+ pos.coords.latitude

+ "<br>Longitude: "

+ pos.coords.longitude;}

</script>

 

</body>

</html>

Output:
LokasiPeta

Displaying location using Latitude and Longitude


Penanganan Error dan Penolakan: Sangat penting untuk melakukan penanganan error pada geolokasi dan menampilkan pesan peringatan ketika terdapat error. Fungsi seperti getCurrentPosition() digunakan untuk menangani error. Fungsi PositionError yang digunakan oleh error handler memiliki dua properti yang memungkinkan fungsi untuk menangani error secara efisien: yaitu:
  1. Code
  2. Message

Error yang biasa dihasilkan pada geolokasi seperti diperlihatkan pada tabel 1:

Tabel 1 Error Geolokasi
ERRORERROR DESCRIPTION
UNKNOWN_ERRORError tidak diketahui
PERMISSION_DENIEDAplikasi tidak memiliki akses untuk menggunakan layanan lokasi
POSITION_UNAVAILABLELokasi pada perangkat tidak ditemukan
TIMEOUTWaktu untuk memproses lokasi melampaui batas interval maksimum

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Errors dalam geolokasi

</title>

 

<style>

.mnk {

font-size:40px;

font-weight:bold;

color:#009900;

margin-left:20px;}

 

.Makan {

margin-left:150px;}

 

p {

font-size:20px;

margin-left:20px;}

</style>

</head>

 

<body>

<div class = "mnk">

Lokasi Peta

</div>

 

<p>

Error handling pada geolokasi

</p>

 

<button class = "Makan" onclick="getlocation()">Klik</button>

 

<p id="demo1">

</p>

 

<script>

 

var variable1 = document.getElementById("demo1");

 

function getlocation(){

navigator.geolocation.getCurrentPosition(showLoc, errHand);}

 

function showLoc(pos){

variable1.innerHTML = "Lati"

+ "tude: "

+ pos.coords.latitude 

+ "<br>Longitude: " 

+ pos.coords.longitude;}

 

function errHand(err)

{

switch(err.code){

case err.PERMISSION_DENIED:

variable1.innerHTML = "Apli"

+ "kasi tidak memiliki "

+ "akses untuk menggunakan"

+ " pelayanan lokasi"

break;

 

case err.POSITION_UNAVAILABLE:

variable1.innerHTML = "Lokasi"

+ " dari perangkat tidak"

+ " tersedia"

break;

 

case err.TIMEOUT:

variable1.innerHTML = "Waktu"

+ " untuk mendapatkan lokasi"

+ " pengguna habis"

break;

 

case err.UNKNOWN_ERROR:

variable1.innerHTML = "Waktu"

+ " untuk fetch informasi"

+ " lokasi sudah melampaui"

+ " batas interval maksimum"

break;}

}

 

</script>

 

</body>

</html>

Output:
Lokasi Peta

Error handling pada geolokasi


Baca Juga:

Menampilkan Hasil Pencarian Lokasi ke Dalam Peta: Menampilkan lokasi pada sebuah peta merupakan suatua hal yang sangat menarik untuk dikerjakan. Pelayanan ini digunakan untuk menyediakan lokasi nyata pada peta yang dimiliki oleh prangkat.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Display location in map

</title>

 

<style>

.mnk {

font-size:40px;

font-weight:bold;

color:#009900;

margin-left:20px;}

 

.makan {

margin-left:150px;}

 

p {

font-size:20px;

margin-left:20px;}

</style>

</head>

 

<body>

<div class = "mnk">

Lokasi Peta

</div>

 

<p>

Menampilkan lokasi dalam map

</p>

 

<button class= "makan" type="button" onclick="getlocation();">

Posisi Saat ini

</button>

 

<div id="demo2" style="width: 500px; height: 500px;"></div>

 

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>

 

<script type="text/javascript">

function getlocation()

{

if(navigator.geolocation)

{navigator.geolocation.getCurrentPosition(showLoc, errHand);}

}

 

 

 

function showLoc(pos)

{

latt = pos.coords.latitude;

long = pos.coords.longitude;

var lattlong = new google.maps.LatLng(latt, long);

var OPTions =

{

center: lattlong,

zoom: 10,

mapTypeControl: true,

navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL}

}

var mapg = new google.maps.Map(document.getElementById("demo2"), OPTions);

var markerg =

new google.maps.Marker({position:lattlong, map:mapg, title:"You are here!"});

}

 

 

 

function errHand(err

{

switch(err.code){

case err.PERMISSION_DENIED:

result.innerHTML = "Aplikasi"

+ " tidak memiliki akses "

+ "untuk menggunakan "

+ "pelayanan lokasi"

break;

 

case err.POSITION_UNAVAILABLE:

result.innerHTML = "Lokasi"

+ " dari perangkat tidak"

+ " diketahui"

break;

 

case err.TIMEOUT:

result.innerHTML = "Waktu"

+ " request untuk pendapat"

+ "kan lokasi pengguna "

+ "sudah habis"

break;

 

case err.UNKNOWN_ERROR:

result.innerHTML = "Time "

+ "untuk fetch informasi"

+ " lokasi telah melampa"

+ "ui batas interval "

+ "maksimum"

break;}

}

</script>

</body>

</html>

Output:
Lokasi Peta

Menampilkan lokasi dalam map


Properti Lokasi: Tabel 2 berikut ini menentukan properti yang digunakan dalam getCurrentPosition() dan nilai kembali yang diberikan dari fungsi tersebut.

Tabel 2 Properti Lokasi
PROPERTINILAI RETURN
coords.latituteMengembalikan nilai latitude sebagai angka desimal
coords.accuracyMengembalikan nilai akurasi posisi
coords.longitudeMengembalikan nilai longitudinal sebagai angka desimal
coords.altitudeMengembalikan nilai altitude dalam satuan meter dibawah permukaan laiut, jika tersedia
coords.altitudeAccuracyMengembalikan nilai akurasi posisi, jika tersedia
coords.headingMengembalikan nilai derajat heading clockwise dari Utara, jika tersedia
coords.speedMengembalikan nilai kecepatan dalam satuan mps (meter per detik), jika tersedia
timestampMengembalikan nilai tanggal atau waktu respon, jika tersedia

Method geolokasi: geolokasi memiliki beberapa method yang dapat membuatnya menjadi lebih menarik dan lebih mudah untuk digunakan seperti diperlihatkan pada tabel 3.

Tabel 3 Method Geolokasi
METHODDESKRIPSI
getCurrentPosition()fetch lokasi saat ini dari pengguna
watchPosition()fetch pembaruan berkala dari lokasi user saat ini
clearWatch()membatalkan panggilan watchPosition saat ini ketika dieksekusi


Geolokasi dalam HTML adalah kemampuan untuk mendapatkan informasi lokasi geografis pengguna melalui browser web. Penggunaan Geolokasi membawa beberapa keunggulan yang signifikan dalam pengembangan web dan pengalaman pengguna. Berikut adalah beberapa kelebihannya:
  • Personalisasi Konten Lokal: Penggunaan Geolokasi memungkinkan pengembang untuk menyesuaikan konten berdasarkan lokasi geografis pengguna. Hal ini dapat digunakan untuk menampilkan informasi lokal yang relevan, seperti cuaca, acara atau promosi di dekat pengguna, pusat pelayanan terdekat, atau informasi wisata lokal.
  • Navigasi dan Layanan Berbasis Lokasi: Geolokasi memungkinkan pengembang untuk membuat layanan navigasi yang lebih interaktif dan akurat. Hal ini dapat diterapkan dalam aplikasi peta, layanan ride-sharing, aplikasi perjalanan, atau aplikasi penunjuk lokasi yang membantu pengguna untuk menemukan arah atau lokasi yang diinginkan.
  • Peningkatan Pengalaman Pengguna: Dengan memanfaatkan Geolokasi, pengalaman pengguna dapat ditingkatkan secara signifikan. Aplikasi atau situs web dapat menyesuaikan konten atau layanan berdasarkan lokasi pengguna, menciptakan pengalaman yang lebih terpersonalisasi dan relevan.
  • Pemetaan dan Visualisasi Data: Dalam konteks analisis data, Geolokasi memungkinkan visualisasi data berdasarkan lokasi. Ini bermanfaat dalam penelitian, pemetaan tren geografis, pelacakan pergerakan, dan presentasi data yang berbasis lokasi.
  • Dukungan Dalam Keamanan: Dalam beberapa aplikasi, Geolokasi dapat berperan dalam meningkatkan keamanan, seperti pelacakan perangkat yang hilang atau dicuri. Fitur ini membantu pemilik perangkat menemukan atau melacak perangkat dengan menggunakan layanan Geolokasi.
  • Pengoptimalan Layanan dan Pemasaran: Berdasarkan informasi lokasi pengguna, perusahaan dapat mengoptimalkan layanan dan strategi pemasaran. Ini memungkinkan untuk menargetkan audiens yang lebih spesifik di wilayah tertentu, memberikan penawaran lokal atau promosi yang lebih relevan.
  • Fungsi Tanpa Instalasi Aplikasi Tambahan: Penggunaan Geolokasi dalam HTML memanfaatkan fitur bawaan dari browser web tanpa perlu menginstal aplikasi tambahan, membuat akses informasi lokasi lebih mudah dan cepat bagi pengguna.

Geolokasi dalam HTML memiliki potensi besar dalam meningkatkan interaktivitas, relevansi, dan kualitas pengalaman pengguna dalam berbagai jenis aplikasi web. Namun, dalam penggunaannya, penting untuk memperhatikan privasi pengguna dan memberikan kontrol yang adekuat atas penggunaan informasi lokasi.

Dalam pengembangan aplikasi web, penanganan dengan bijak terhadap informasi geografis pengguna merupakan kunci utama dalam memberikan manfaat tanpa mengorbankan privasi pengguna.

Referensi Tambahan:

Artikel ini didedikasikan kepada: Risma Kusumawati, Seto Pribadhi, Shafana Fatimatul Khusainiyah, Sita Ardhania Ramadhani, dan Victor Ryan Tuapattinaja.

6 komentar untuk "Cara Mengatur Lokasi Peta HTML pada GPS"

  1. Apa fungsi dari geolokasi pada HTML atau HTML5?

    BalasHapus
    Balasan
    1. Geolokasi merupakan salah satu API HTML5 yang digunakan untuk mengidentifikasi lokasi geografis untuk aplikasi web. Fituer tersebut memungkinkan pengembang untuk menavigasi koordinat lintang dan bujur dari pengunjung situs web saat ini.

      Hapus
  2. Bagaimana cara kerja geolokasi HTML?

    BalasHapus
    Balasan
    1. API Geolokasi diakses melalui panggilan yang menuju ke navigator. Dengan panggilan tersebut, maka akan mengakibatkan browser pengguna meminta izin untuk mengakses data lokasi mereka. Jika informasi dan ijin tersebut telah diterima dan disetujui, maka browser akan menggunakan fungsionalitas yang tersedia pada perangkat untuk mengakses informasi lokasi yang tersedia pada perangkat tersebut atau GPS.

      Hapus
  3. Bagaimana cara mengetahui geolokasi dari browser?

    BalasHapus
    Balasan
    1. Pada bagian windows object browser terdapat properti yang disebut dengan navigator yang merupakan object dari lokasi itu sendiri yang berisi informasi properti lebih lanjut, atau yang disebut dengan geolokasi. Jika browser yang digunakan mendukung fitur geolokasi, maka user dapat meminta lokasi pengguna dari API geolokasi menggunakan fungsi getCurrentPosition.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -