Aquí ya tengo el script para obtener la coordenada (Latitud y Longitud). Dado que, cuando hice clic en el botón, algunas personas se preguntan cuándo aparecerá la coordenada. Entonces, cómo mostrar la loading... hasta que se muestre la coordenada en el texto de entrada sin recargar la página.
Aquí está el código:
var x = document.getElementById("lati"); var y = document.getElementById("longi"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML = position.coords.latitude; y.innerHTML = position.coords.longitude; document.getElementById("input_latitude").value = x.innerHTML; document.getElementById("input_longitude").value = y.innerHTML; } <div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_latitude" id="input_latitude" placeholder="Latitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_latitude; ?>" required></div> <div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_longitude" id="input_longitude" placeholder="Longitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_longitude; ?>" required></div> <div class="mb-3"> <button type="button" class="btn btn-link" style="font-family: Roboto, sans-serif;" onclick="getLocation()">Current Location</button> </div> var x = document.getElementById("lati"); var y = document.getElementById("longi"); function getLocation() { document.getElementById("input_latitude").value = "Loading..."; document.getElementById("input_longitude").value = "Loading..."; if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, () => {console.log("Error")}); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { console.log(position); x.innerHTML = position.coords.latitude; y.innerHTML = position.coords.longitude; document.getElementById("input_latitude").value = x.innerHTML; document.getElementById("input_longitude").value = y.innerHTML; } <div id="lati"></div> <div id="longi"></div> <div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_latitude" id="input_latitude" placeholder="Latitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_latitude; ?>" required></div> <div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_longitude" id="input_longitude" placeholder="Longitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_longitude; ?>" required></div> <div class="mb-3"> <button type="button" class="btn btn-link" style="font-family: Roboto, sans-serif;" onclick="getLocation()">Current Location</button> </div>El siguiente código funcionará. He agregado una etiqueta <p> que no tiene texto por defecto. Cuando el usuario hace clic en el botón, pego "cargando..." dentro de la etiqueta <p> y cuando se muestra el resultado, lo vuelvo a poner en blanco.
var x = document.getElementById("lati"); var y = document.getElementById("longi"); function getLocation() { document.getElementById("loadingText").innerHTML = "loading..."; if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); document.getElementById("loadingText").innerHTML = ""; } else { x.innerHTML = "Geolocation is not supported by this browser."; document.getElementById("loadingText").innerHTML = ""; } } function showPosition(position) { x.innerHTML = position.coords.latitude; y.innerHTML = position.coords.longitude; document.getElementById("input_latitude").value = x.innerHTML; document.getElementById("input_longitude").value = y.innerHTML; } #loadingText { display: block !important; } <div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_latitude" id="input_latitude" placeholder="Latitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_latitude; ?>" required></div> <div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_longitude" id="input_longitude" placeholder="Longitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_longitude; ?>" required></div> <div class="mb-3"> <button type="button" class="btn btn-link" style="font-family: Roboto, sans-serif;" onclick="getLocation()">Current Location</button> <p id="loadingText"></p> </div>var x = document.getElementById("lati"); var y = document.getElementById("longi"); function getLocation() { if (navigator.geolocation) { document.getElementById("input_latitude").value = "Loading..."; document.getElementById("input_longitude").value = "Loading..."; document.querySelectors('input').setAttribute("disabled"); //input is disabled so that input can not be edited. navigator.geolocation.getCurrentPosition(showPosition, () => {console.log("Error")}); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { console.log(position); x.innerHTML = position.coords.latitude; y.innerHTML = position.coords.longitude; document.getElementById("input_latitude").value = x.innerHTML; document.getElementById("input_longitude").value = y.innerHTML; }