How can I make Geolocation API function working on localhost file://?

Question

I have this basic code to retrieve latitude and longitude with Geolocation API :

showmap.html

<button  onclick="getLocation()">Find me </button>

<script type="text/javascript" src="js/geolocation.js"></script>

js/geolocation.js

function getLocation() {

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    alert("Geolocation is not supported by your browser. Please update your browser. Visit Help Center.");
  }
}

function showPosition(position) {
  var latitude = position.coords.latitude;
  var longitude =  position.coords.longitude;

  console.log("Latitude : " + latitude + "<br> Longitude :" + longitude);
}

When I click on the button I receive this error in the console

SyntaxError: An invalid or illegal string was specified showmap.html:72
    _sendMessage file:///home/user/Desktop/Projects/showmap.html:72
    call file:///home/user/Desktop/Projects/showmap.html:64
    getCurrentPosition file:///home/user/Desktop/Projects/showmap.html:16
    getLocation file:///home/user/Desktop/Projects/js/geolocation.js:4
    onclick file:///home/user/Desktop/Projects/showmap.html:1
    fireMouseEvent resource://devtools/server/actors/emulation/touch-simulator.js:290
    dispatchMouseEvents resource://devtools/server/actors/emulation/touch-simulator.js:264

I'm trying to figure out how to solve this issue. Is this not working because I'm in file:// ?

Is this is an answer to your question:https://stackoverflow.com/questions/40295830/local-development-of-geolocation-chrome-50 .The code you have given working perfectly on the test — Atul Mathew, Jan 10 '20 at 05:11
@StackSlave : Interesting. What do you mean? Could you elaborate please? Thanks — Grogu, Jan 10 '20 at 05:15
@marcelo : According to the conversations in that thread file:// should not be a problem since it's ran from localhost, yes? — Grogu, Jan 10 '20 at 05:20
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs — StackSlave, Jan 10 '20 at 05:22
@SaturnConjuction No, `file://` is not a hosted server, it is the filesystem of your local machine. When interacting with a server, you use `http(s)://` protocol. See guest271314's answer in the dup proposed by marcelo. — Teemu, Jan 10 '20 at 05:23
You also probably don't have access to the Client's filesystem. — StackSlave, Jan 10 '20 at 05:27

score 0 · Accepted Answer · answered Jan 11 '20 at 16:05

To get file: to work with Geolocation Api, run ngrok and use the https url to host your HTML app. No need for PHP or backend language like Python, you can generate a local tunnel using your credentials.

This assumes you have ngrok installed and that you are running Ubuntu.

Open terminal and run :

ngrok http -auth="user:password" file:///path/to/your/HTML/project

Reference : Serving local directories with ngrok's built-in fileserver https://ngrok.com/docs

How can I make Geolocation API function working on localhost file://?

1 Answers1

Linked

Related