Cara Mengatur Lokasi Peta HTML pada GPS
 |
| Properti Geolokasi DOM HTML |
var loc = navigator.geolocation
Contoh:
var loc = navigator.geolocation;
function getLoc()
function getlocation()
<!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>
Displaying location using Latitude and Longitude
- Code
- Message
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>
Error handling pada geolokasi
<!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>
Menampilkan lokasi dalam map
Properti Lokasi: Tabel 2 berikut ini menentukan properti yang digunakan dalam getCurrentPosition() dan nilai kembali yang diberikan dari fungsi tersebut.
Method geolokasi: geolokasi memiliki beberapa method yang dapat membuatnya menjadi lebih menarik dan lebih mudah untuk digunakan seperti diperlihatkan pada tabel 3.
- 5 Bagian Utama Penggunaan Layout pada HTML [klik]
- 2 Jenis Utama Penggunaan File Path pada HTML [klik]
- 4 Cara Pengaturan Utama Penggunaan Iframe pada HTML [klik]
- Cara Sederhana Membuat Komentar pada HTML [klik]
- 8 Pengaturan Utama Penggunaan Link pada Dokumen HTML [klik]
- 24 Jenis Karakter Deprecated Tag pada HTML [klik]
- 260 Karakter Utama URL Encoding yang Digunakan pada HTML [klik]
Apa fungsi dari geolokasi pada HTML atau HTML5?
BalasHapusGeolokasi 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.
HapusBagaimana cara kerja geolokasi HTML?
BalasHapusAPI 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.
HapusBagaimana cara mengetahui geolokasi dari browser?
BalasHapusPada 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