CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Golden Friendship Site
Golden Friendship Site

Reputation: 79

Inserting HTML5 Geo Location Laititude and Longitude values into Database

The following code gives me the latitude and longitude of the device.

<!DOCTYPE html>
<html>
  <body>
    <p>Click the button to get your coordinates.</p>
    <button onclick="getLocation()">Try It</button>
    <p id="demo"></p>
    <script>
      var x = document.getElementById("demo");
      function getLocation() {
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition);
        }else{
          x.innerHTML = "Geolocation is not supported by this browser.";
        }
      }
      function showPosition(position) {
        x.innerHTML = "Latitude: " + position.coords.latitude +
        "<br>Longitude: " + position.coords.longitude;
      }
    </script>
  </body>
</html>

I want to insert them into the database on page load but not sure how to do it.

$lat = ''; // Latitude value from javascript above
$long = ''; // Longitude value from javascript above

$stmt = $pdo->prepare("INSERT INTO members(mem_lat, mem_long)VALUES(:lat, :long)");
$stmt-> bindValue(':lat', $lat);
$stmt-> bindValue(':long', $long);
$stmt-> execute();

I am not sure how to get the Latitude and Longitude value from the javascript to $lat and $long on page load. Any help would be appreciated.

Upvotes: 0

Views: 235

Answers (1)

Bilel
Bilel

Reputation: 1429

Due to new security standards, this couldn't be executed in this snippet and should be working on a hosted page with SSL enabled (HTTPS). The timeout added to the function would be useful to wait for a better gps accuracy after page loading...

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Form</title>

<script>

function postAjax(url, data, success) {
	var params = typeof data == 'string' ? data : Object.keys(data).map(
			function (k) {
			return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
		}).join('&');

	var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
	xhr.open('POST', url);
	xhr.onreadystatechange = function () {
		if (xhr.readyState > 3 && xhr.status == 200) {
			success(xhr.responseText);
		}
	};
	xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.send(params);
	return xhr;
}
function showPosition(position) {
    var x = document.getElementById("demo");
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;
	x.innerHTML = "Latitude: " + position.coords.latitude +
		"<br>Longitude: " + position.coords.longitude;
    postAjax('/gpsinsert.php', { lat: parseFloat(position.coords.latitude), lng: parseFloat(position.coords.longitude) }, function(data){ console.log(data); });
}
function errorHandler(err) {
	if (err.code == 1) {
		alert("Error: Access is denied!");
	} else if (err.code == 2) {
		alert("Error: Position is unavailable!");
	}
}
function getLocation() {
    var x = document.getElementById("demo");
	if (navigator.geolocation) {

		// timeout for better GPS Accuracy !
		var options = {
			timeout: 20000
		};
		navigator.geolocation.getCurrentPosition(showPosition, errorHandler, options);
        
	} else {
		x.innerHTML = "Geolocation is not supported by this browser.";
	}
}

window.onload = getLocation()
</script>
</head>
<style>

</style>
<body>
    <p>Click the button to get your coordinates.</p>
    <button onclick="getLocation()">Try It</button>
    <p id="demo"></p>

</body>

</html>

Upvotes: 1

Related Questions