Understanding geolocation and how to make it work

Hey there!! I’m really confused with geolocation. I’ve read some posts about it but no one seems to be quite the answer I’m looking for.
I have this simple code on my .js at codepen:

function getLocation() {
    if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(function(position)          {
    } else {
      console.log("Not working");

$( document ).ready( function(){

I just want to see that it works before doing anything else. But when I refresh the page, all I get at the console is this:

pen.js:3 [Deprecation] getCurrentPosition and watchPosition usage in cross-origin iframes is deprecated and will be disabled in M63, around December 2017. To continue to use this feature, it must be enabled by the embedding document using Feature Policy, e.g. <iframe allow="geolocation" ...>. See https://goo.gl/EuHzyv for more details.

I’ve read something about allowing geolocation on iframe, but I don’t fully understand what that is or how could I do so. May be there’s some (or lots of) important things that I should learn before doing this, could someone point me on the right direction please?

When I run your exact code in Codepen, I do get that message the first time, but still get the position displayed in the console (see below):

You could see more info here.

Maybe if you run your code with codepen it will show you this message because codepen is basically an iFrame. I think if you run it locally, it won’t be a problem (using code editor and chrome/firefox/ safari).

Ok, I’m on another PC right now and it seems to work (still get the same warning but I also get the position). I think I might have blocked my location on my PC.

Does this mean that it is codepen that needs an update?