Cara Mengatur Lokasi Peta HTML pada GPS
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.
- 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.
6 komentar untuk "Cara Mengatur Lokasi Peta HTML pada GPS"
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 -
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