Geolocation API | JavaScript

Halo! IT Corner hari ini saya belajar tentang geolocation API. API itu bukan "api" ya, tapi singkatan dari Application Programming Interface. API ini bisa menambahkan banyak fungsi dan kemudahan pada website, seperti mengintegrasi cuaca ataupun mendapatkan geolokasi.

Lantas, bagaimana cara mengintegrasi API itu? Untuk project ini, saya menggunakan API geolocation. API ini nanti akan mendapatkan garis lintang dan garis bujur pengguna setelah mendapatkan perizinan.

Untuk HTML-nya itu menggunakan iframe untuk menampilkan Google Maps. Selanjutnya ada tombol Get Location untuk mendapatkan lokasi yang akan ditampilkan pada iframe. Bawahnya itu ada area teks yang akan menampilkan hasilnya dan juga memasukkan koordinat sendiri. Akhirnya, tombol Find Coordinates akan mencari koordinat dan menampilkannya pada iframe setelah dua teks area terisi.

Selanjutnya adalah bagian JavaScript-nya. Dalam fungsi getLocation(), kita melihat apakah sudah mendapat izin, jika sukses akan memanggil fungsi showPosition(), dan jika ada error akan memanggil fungsi showError().

Di fungsi showPosition(), kita mengambil nilai latitude dan longitude-nya. Seterusnya, kita menggabungkan kedua variabel itu. Setelah menggabungkan, akan menampilkan lokasi pada iframe dan latitude dan longitude-nya pada teks area.

Di fungsi showError() ini cukup sederhana. Fungsi ini hanya memberi tahu jika ada error, tetapi tidak akan memberi tahunya secara rinci.

Selanjutnya, fungsi showCoordinates() ini khusus untuk bagian teks area. Setelah tombol Find Coordinates di klik, fungsi ini akan dipanggil dan akan mengambil nilai latitude dan longitude. Setelah itu akan dicek apakah sudah benar. Kemudian, akan digabungkan menjadi satu dan akan menampilkannya pada iframe.

Sampai di sini untuk materi geolocation API. Sampai jumpa lagi di blog materi selanjutnya!

Project Source Code

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geolocation</title>
    <style>
        body {
            background-color: antiquewhite;
        }
        .geolocation-container {
            background-color: lightblue;
            border: 2px solid black;
            margin: 10px auto;
            padding: 10px;
            width: 70%;
        }
        #googleMap {
            border: 3px solid black;
            display: block;
            height: 330px;
            margin: 10px auto;
            width: 80%;
        }
    @media only screen and (max-width: 768px) {
        .geolocation-container {
            background-color: lightblue;
            border: 2px solid black;
            margin: 30px auto;
            padding: 10px;
            width: 90%;
        }
        #googleMap {
            border: 3px solid black;
            display: block;
            height: 330px;
            margin: 20px auto;
            width: 95%;
        }
        button {
            padding: 5px;
        }
        .media-text {
            font-size: 4.5vw;
        }
    }
    </style>
</head>
<body>
    <div class="geolocation-container">
        <div>
            <iframe id="googleMap" frameborder="0" scrolling="no" src="https://maps.google.co.id?output=embed"></iframe>
        </div>
        <div>
            <button class="media-text" onclick="getLocation()">Get Location</button>

            <p class="media-text">Latitude: <input type="text" id="findLatitude" value=""></p>
            <p class="media-text">Longitude: <input type="text" id="findLongitude" value=""></p>
            <p><button class="media-text" onclick="showCoordinates()">Find Coordinates</button> <span id="errorMessage"></span></p>
        </div>
    </div>

    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                return false;
            }
        }

        function showPosition(position) {
            let latitude = position.coords.latitude;
            let longitude = position.coords.longitude;
            let coords = latitude + ", " + longitude;
            
            document.getElementById("googleMap").setAttribute("src", "https://maps.google.co.id/?q="+ coords +"&z=60&output=embed");
            document.getElementById("findLatitude").value = latitude;
            document.getElementById("findLongitude").value = longitude;
        }

        function showError(error) {
            console.log(error);
            alert(`An error as occurred.\n${error}`)
        }

        function showCoordinates() {
            event.preventDefault();
            let latitude = document.getElementById("findLatitude").value;
            let longitude = document.getElementById("findLongitude").value;

            if (latitude == "" || longitude == "") {
                document.getElementById("errorMessage").innerHTML = "Latitude and longitude must not be empty.";
            } else {
                let coords = latitude + ", " + longitude;
                document.getElementById("googleMap").setAttribute("src", "https://maps.google.co.id/?q="+ coords +"&z=60&output=embed");
            }
        }
    </script>
</body>
</html>

Brillianta Febimas Winawan

Search This Blog

Geolocation API | JavaScript

Labels

Comments

Post a Comment

Popular posts from this blog

Validasi Input | JavaScript

Login & Registration Form | Project

Classes | JavaScript