Pinned

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:

8 Properti Utama Penggunaan Geolokasi pada HTML
Properti Geolokasi DOM HTML

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

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



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

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

6 komentar:

  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-2514-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 -