Navigator and Geolocation make me sick

1

I have searched free code camp and the web for days but I still can’t master geolocation.

From what I gather it has been sacked from many browsers. I have tried using Firefox but that didn,t help.

I have tried loads of things including solutions from freecodecamp but nothing works. It seems to be a sickly thing that lots of campers are having all kinds of problems with. In other words trying to use it has made me feel like a drunk trying to find where he’s dropped his wallet.

Are there any alternatives that are less trouble?

2

This works fine for me in my Firefox browser:

$(document).ready(function() {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    console.log('Your position is lat =', lat, ' and lon=', lon);
  });
});

The only thing is that it asks if I want to allow the browser to send my location, which seems reasonable. Here is a working pen.

There are other apis that will return information about your ip, including lon and lat (assuming that is what you are after.

3

I just updated the pen to show how to use an api. Note the slight difference in your location. Geolocation (afaik) is looking for the location of your browser while the IP is looking for the location of your IP, but they should be not too far apart.

$(document).ready(function() {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    console.log('Geolocation says your position is lat =', lat, ' and lon=', lon);
  });
  
  $.getJSON('https://freegeoip.net/json/', function(position) {
    var lat = position.latitude;
    var lon = position.longitude;
    console.log('freegeoip says your position is lat =', lat, ' and lon=', lon);
  });
});
4

The issue with browsers is that they pretty much all support gelocation (source: https://caniuse.com/#feat=geolocation), but the want you to use it over HTTPS (i.e. the secure protocol).

This is not a problem on it’s own, but if your weather API is served over HTTP (i.e. non-secure) it can cause problems. Your HTTPS app won’t like it.

1 Like
5

In my firefox browser I have tried copying the pens above into empty pens with the same settings but
my console log just draws a blank.
The post saying about using geolocation over HTTPS doesn’t make me any wiser about what I should do.

I still havn’t found enough bones to give me the vision of that dinosaur.

6

Are you remembering to load jQuery in your pen first?

If the console on Codepen is drawing a blank, it could be because $(document).ready... never fires. Stuff beginning with $ is usually jQuery. KS’s code block above works fine for me in Codepen when jQuery is imported.

If you check your actual browser console and see an error like the this one:

image

That means you need to add jQuery in Codepen.

Could you link to a example in Codepen you have made?

7

Hurray i’ve done it Thanks.