Artikel Terbaru

4 Tahap Menciptakan Elemen Menggunakan Method createElement() DOM

Pada dokumen html, method document.createElement() adalah method yang digunakan untuk menciptakan elemen html. Elemen ini ditentukan menggunakan elementName yang diciptakan sebelumnya, atau dari elemen html yang tidak diketahui, yang diciptakan jika elementName tidak ditentukan atau tidak dikenali.

8 Properti Utama Penggunaan Geolokasi pada HTML

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:

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

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

Posting Komentar

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

Catatan: setiap iklan yang ditayangkan pada blog ini bersumber dari google adsense. Dengan jenis iklan yang dipilih adalah, sebagai berikut.

POIN 1, Iklan yang ditampilkan hanya boleh berbahasa indonesia atau berbahasa inggris. Tidak menerima jenis iklan dalam bahasa yang lain selain yang telah disebutkan karena blog ini dibuat untuk para pengunjung dari negara atau orang yang berbahasa Indonesia.

POIN 2, Setiap gambar yang ditampilkan pada iklan sifatnya tidak mengganggu para pengunjung yang melihat blog, atau tidak boleh menampilkan gambar yang bersifat menjijikkan atau merangsang rasa mual.

POIN 3, Jenis iklan yang dipasang bukan merupakan iklan spam, atau berisi dan mengarahkan pengunjung ke alamat yang berbahaya atau bersifat penipuan.

POIN 4, Segala bentuk iklan tunduk dan patuh pada ketentuan dari pihak Adsense google dan pemilik blog.

POIN 5, Segala jenis iklan yang tidak bertentangan dengan poin 1-4 yang dijelaskan sebelumnya, maka iklan tersebut dapat ditampilkan pada blog.

POIN 6, Jika ada pihak ketika yang ingin memasang iklan pada blog ini secara langsung, maka dapat menghubungi pemilik blog melalui kontak 0882 3218 8316.



~ Ikatlah Ilmu dengan Memostingkannya ~

Hot Artikel

Enkapsulasi pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C

3 Jenis Utama Looping pada Java

Perbedaan Antara int main() dan int main(void) pada Bahasa C

Penjelasan Singkat tentang Konsep Asosiasi, Komposisi, dan Agregasi pada Java