JSFiddle - React, Tailwind, and code Playground

by Cuong Nguyen

HTML

<body>

<p>Click the button to get your coordinates.</p>

<button id='getLocation'>Try It</button>

<p id="demo"></p>
</body>

CSS

#demo {
  font-style: bold;
  color: red;
}

JavaScript

$("#getLocation").click(function (){
 var x = $("#demo");
	getLocation();
});


function getLocation() {
    if (navigator.geolocation) {
        var options = {
          enableHighAccuracy: true,
          timeout: 5000,
          maximumAge: 10
        };
        navigator.geolocation.getCurrentPosition(showPositionSuccess, showPositionError, options);
    } else { 
        alert("Geolocation is not supported by this browser.");
    }
}

function showPositionSuccess(position) {
    $("#demo").html( "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude);
}

function showPositionError(error) {
	switch(error.code) {
        case error.PERMISSION_DENIED:
            $("#demo").html("User denied the request for Geolocation.");
            break;
        case error.POSITION_UNAVAILABLE:
            $("#demo").html("Location information is unavailable.");
            break;
        case error.TIMEOUT:
           $("#demo").html("The request to get user location timed out.");
            break;
        case error.UNKNOWN_ERROR:
            $("#demo").html("An unknown error occurred.");
            break;
    }
}