Untuk penjelasan lebih lengkap tentang Geolocation HTML dapat dilihat disini.
<script>
navigator.geolocation.getCurrentPosition(
function(p) {
alert('Latitude: ' + p.coords.latitude + ', Longitude: ' +
p.coords.longitude + ', Altitude: ' +
p.coords.altitude);
},
function () {
alert('Error locating your device');
}
);
</script>
atau gunakan kode berikut jika hanya menerima input dari GPS (mode GPS only)
navigator.geolocation.getCurrentPosition(
function(position) {
alert('Latitude: ' + position.coords.latitude + ', Longitude: ' + position.coords.longitude + ', Altitude: ' + position.coords.altitude);
},
function () {
alert('Error locating your device');
},
{enableHighAccuracy: true}
);
+Google Map:
<p id="demo">Klik tombol untuk mendapatkan posisi</p>
<button onclick="getLocation()">Coba Geolocation + Google Map</button>
<div id="mapholder"></div>
<script src="https://maps.google.com/maps/api/js?key=key-google-map"></script>
<!--
Untuk menggunakan kode ini di website anda, dapatkan key API gratis dari Google.
-->
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation tidak didukung oleh browser.";
}
}
function showPosition(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var latlon = new google.maps.LatLng(lat, lon)
var mapholder = document.getElementById('mapholder')
mapholder.style.height = '250px';
mapholder.style.width = '500px';
var myOptions = {
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
}
var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User menolak permintaan untuk Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Informasi lokasi tidak tersedia."
break;
case error.TIMEOUT:
x.innerHTML = "Permintaan lokasi user sudah timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "Error tidak diketahui."
break;
}
}
</script>
Klik tombol untuk mendapatkan posisi