Cara Menampilkan Lokasi Real Time Menggunakan Geolocation

Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana Cara Menampilkan Lokasi Real Time Menggunakan Geolocation, mungkin sangat berharga sekali ketika kita menggunakan lokasi ini dan dapat mengetahui keberadaan kita, langsung kita coba saja yah, teman teman teman bisa salinkan scriptnya di bawah sini :

<style>
	#mapholder img {border:10px solid red;}
</style>

<button id="demo" onclick="getLocation()">Klik disini untuk mengetahui posisi anda.</button><br/><br/>

<div id="mapholder"></div>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

<style>

#mapholder img {border:10px solid red;}

</style>

<button id="demo" onclick="getLocation()">Klik disini untuk mengetahui posisi anda.</button><br/><br/>

var x = document.getElementById("demo");

function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition, showError);

} else {

x.innerHTML = "Geolocation is not supported by this browser.";

}

function showPosition(position) {

var latlon = position.coords.latitude + "," + position.coords.longitude;

var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="

+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";

}

function showError(error) {

switch(error.code) {

case error.PERMISSION_DENIED:

x.innerHTML = "User denied the request for Geolocation."

break;

case error.POSITION_UNAVAILABLE:

x.innerHTML = "Location information is unavailable."

break;

case error.TIMEOUT:

x.innerHTML = "The request to get user location timed out."

break;

case error.UNKNOWN_ERROR:

x.innerHTML = "An unknown error occurred."

break;

}

</script>

Jika sudah teman teman save dan jalankan kemudian klik (Klik disini untuk mengetahui posisi anda) dan pilih share location, maka hasilnya akan menampilkan keberadaan kita, oke mudah yah tentang Cara Menampilkan Lokasi Real Time Menggunakan Geolocation. Sekian tutorial tentang Cara Menampilkan Lokasi Real Time Menggunakan Geolocation. Sampai jumpa dan terimakasih, selamat mencoba ..

ini hasilnya :

#KeepLearn

#IsmetMA

Cara Menampilkan Lokasi Real Time Menggunakan Geolocation

Facebook DUMET School

Categories