Search code examples
javascriptphpgeolocation

geolocation allow location exception causes site to fail going to the success function

so this is my geolocation code

<!-- <xml version="1.0" encoding="utf-8"> -->
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Geolocation API Demo</title>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"/>
<script>
function successHandler(location) {
    var message = document.getElementById("message"), html = [];
    html.push("<img width='400' height='400' src='http://maps.google.com/maps/api/staticmap?center=", location.coords.latitude, ",", location.coords.longitude, "&markers=size:small|color:blue|", location.coords.latitude, ",", location.coords.longitude, "&zoom=14&size=256x256&sensor=false' />");
    html.push("<p>Longitude: ", location.coords.longitude, "</p>");
    html.push("<p>Latitude: ", location.coords.latitude, "</p>");
    html.push("<p>Accuracy: ", location.coords.accuracy, " meters</p>");
    message.innerHTML = html.join("");

    var javascriptLongitude = location.coords.longitude;
    var javascriptLatitude = location.coords.latitude;
    var javascriptAccuracy = location.coords.accuracy;
    window.location.href = "myphpfile.php?longitude=" + javascriptLongitude + "&" + "latitude=" + javascriptLatitude + "&" + "accuracy=" + javascriptAccuracy;
}
function errorHandler(error) {
    alert('Attempt to get location failed: ' + error.message);
}
navigator.geolocation.getCurrentPosition(successHandler, errorHandler);

</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
<div id="message">Location unknown</div>
</body>
</html>

I set the variables in these 4 lines

var javascriptLongitude = location.coords.longitude;
var javascriptLatitude = location.coords.latitude;
var javascriptAccuracy = location.coords.accuracy;
window.location.href = "myphpfile.php?longitude=" + javascriptLongitude + "&" + "latitude=" + javascriptLatitude + "&" + "accuracy=" + javascriptAccuracy;

and this is the myphpfile.php code

<?php
$Longitude = $_GET["longitude"];
$Latitude = $_GET["latitude"];
$Accuracy = $_GET["accuracy"];
$Return = " ".PHP_EOL;

$myfile = fopen("newfile.txt", "w") or die("Unable to open file!");
fwrite($myfile, $Longitude);
fwrite($myfile, $Return);
fwrite($myfile, $Latitude);
fwrite($myfile, $Return);
fwrite($myfile, $Accuracy);
fclose($myfile);
?>

my main problem now is when I open the site, and it asks if I allow it to know my location, and I click allow, it works once...then when I close the tab and open it again, it doesn't work and shows me Location unknown as shown in the code, to fix that, I have to click on that little location icon

and I have to click Clear these settings for future visits or go to chrome://settings/contentExceptions#location and delete my site's item from there then it's gonna work once again...and that can't be done from phones I guess...

my second problem, and it's actually not a big deal, when writing to the txt file, "\n", "\r\n" and PHP_EOL don't work, tried adding them like $Longitude = $_GET["longitude"].PHP_EOL; and $Longitude = $_GET["longitude"]."\n"; but still no luck

Solution

  • It seemed to be the jquery.js tag that stopped the dom element from loading. Also be sure to check if the browser actually has this feature built in because many still don't.

    `

    <div id="message">Loading...</div>

    `

    function successHandler(location) {
   var message = document.getElementById("message"),
     html = [];
   html.push("<img width='400' height='400' src='http://maps.google.com/maps/api/staticmap?center=", location.coords.latitude, ",", location.coords.longitude, "&markers=size:small|color:blue|", location.coords.latitude, ",", location.coords.longitude, "&zoom=14&size=256x256&sensor=false' />");
   html.push("<p>Longitude: ", location.coords.longitude, "</p>");
   html.push("<p>Latitude: ", location.coords.latitude, "</p>");
   html.push("<p>Accuracy: ", location.coords.accuracy, " meters</p>");
   message.innerHTML = html.join("");

   //Uncomment it for it to redirect.
   //window.location.href = "myphpfile.php?longitude=" + location.coords.longitude + "&" + "latitude=" + location.coords.latitude + "&" + "accuracy=" +  location.coords.accuracy;
 }

 function errorHandler(error) {
   alert('Attempt to get location failed: ' + error.message);
 }
 if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(successHandler, errorHandler);
 } else {
   alert("Please download a modern browser.");
 }

    `

    https://jsfiddle.net/iain17/ratzv34t/