CODEWITHSUNDEEP
javascriptjqueryweb
Dominik Teiml
Dominik Teiml

Reputation: 575

Same code in Codepen giving different results

I have this pen: https://codepen.io/dteiml/full/PNMwZo with the following javascript code: 

$('#getWeather').on('click', function() {
navigator.geolocation.getCurrentPosition(success);

function success(pos){
  // get longitude and latitude from the position object passed in
  var lng = pos.coords.longitude;
  var lat = pos.coords.latitude;
  // and presto, we have the device's location!
  console.log("test");
  $('body').html('You appear to be at longitude: ' + lng + ' and latitude: ' + lat);

}

                 });

and html code:

<button id="getWeather">
Get my location
</button>
<body>
</body>

that I forked from somebody that works and one that I created myself http://codepen.io/dteiml/full/aNevrE with the same exact code and settings that doesn't work. What might be the problem?

Upvotes: 0

Views: 104

Answers (3)

Hitesh Ranaut
Hitesh Ranaut

Reputation: 747

You have to use https:// instead of http:// google dont accept request from http protocol.

Upvotes: 1

itamar
itamar

Reputation: 3967

Switch your codepen to https://codepen.io/dteiml/full/aNevrE and it should work.

Here is the warning:

getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.

code

Upvotes: 0

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23863

Had you checked the error console, it would have explained exactly what the difference is:

https vs http

pen.js:3 getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See [redacted] for more details.

(Sorry for the redated, I couldn't post the answer exactly as given because of the link.)

Upvotes: 2

Related Questions