Datagrace

Geolocation With JS

Discussion created by Datagrace on Aug 31, 2016
Latest reply on Aug 31, 2016 by Datagrace

I've been trying to get geolocation to work, without any luck. If you run the code below in a browser, you will get varying results, depending on the browser. The desired result is a one-time prompt to allow use of your location, followed by displaying it. The resulting coordinates can be passed to Google maps. Safari asks for permission, but then returns error #1 in the displayError() function. Firefox on a Mac and Chrome work as desired. IE might.

 

But in a web viewer on Mac, Windows, or iOS, I just get Permission Denied-- error #1.

 

I expect other developers are doing things with geolocation. Does anyone have any idea how they might be getting 'round this barrier? Is there a way to set prefs in the WV's underlying browsers? Am I missing some attribute of the navigator object?

 

<!doctype html>

<html>

<head>

    <title>Where am I?</title>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">

    <meta charset="utf-8">

 

    <script>

 

        var map;

 

        window.onload = getMyLocation;

 

        function getMyLocation() {

            if (navigator.geolocation) {

 

                navigator.geolocation.getCurrentPosition(

                        displayLocation,

                        displayError);

            }

            else {

                alert("Geolocation is not supported.");

            }

        }

 

        function displayLocation(position) {

            var latitude = position.coords.latitude;

            var longitude = position.coords.longitude;

 

            var div = document.getElementById("location");

            div.innerHTML = "You are at Latitude: " + latitude + ", longitude: " + longitude;

 

        }

 

 

        function displayError(error) {

            var errorTypes = {

                0: "Unknown error",

                1: "Permission denied",

                2: "Position is not available",

                3: "Request timeout"

            };

            var errorMessage = errorTypes[error.code];

            if (error.code == 0 || error.code == 2) {

                errorMessage = errorMessage + " " + error.message;

            }

            var div = document.getElementById("location");

            div.innerHTML = errorMessage;

        }

 

    </script>

    <style>

        body {

            font-family: Arial, Helvetica, sans-serif;

            margin: 10px;

        }

        div#location, div#distance {

            padding: 5px;

        }

 

        div#map {

            margin: 5px;

            width: 800px;

            height: 800px;

            border: 1px solid black;

        }

 

    </style>

 

</head>

<body>

 

<div id="location">

</div>

 

 

<div id="map">

</div>

 

</body>

</html>

Outcomes