Sunil Kumar Sunil Kumar -4 years ago 265
Javascript Question

Why Geolocation HTML5 getCurrentPosition() is not working on Google Map?

This is the error that I am getting while running below javascript file

getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https for more details.

This is my javascript file

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4HSRrQSje--aI6ImtJF30s5ezaUWxsow&libraries=places"></script>

<script>
function getLocation()
{
console.log("In geolocation");
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
print("Browser doesn't support geolocation");
}

function showPosition(position)
{
console.log("in show position");
dest_lat=position.coords.latitude;
dest_long=position.coords.longitude;

url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng='+ dest_lat + ',' + dest_long + '&sensor=false';
$.get(url, function(data)
{
if (data.status == 'OK')
{
map.setCenter(data.results[0].geometry.location);
console.log("Dragaed lat "+marker.getPosition().lat());
console.log("Dragged lng "+marker.getPosition().lng());
console.log("Address "+data.results[0].formatted_address);
}
});
}
</script>
</head>
<body>
<input type="button" value="LocateMe" onclick="getLocation();"/>
</body>
</html>

Answer Source

You have to put it one a server with https://!

If you are using Visual Studio, you can configure to lunch the site with https:// see: https://dotnetcodr.com/2015/09/18/how-to-enable-ssl-for-a-net-project-in-visual-studio/ Alternativelyyou can test it on jsfiddler, which uses https per default.

Besides that your code has a lot of other errors.

  • Brackets don't match
  • map object is not defined in your example
  • varibles are not declared (they are added to the global namespace which can cause some really nasty problems later on and throws an error when you use "use strict")

Here is a working excample on jsfiddle: https://jsfiddle.net/3gkkvs50/ (stackoverflow doesn't use https for the examples)

HTML:

<input type="button" value="LocateMe" onclick="getLocation();" />

JS:

function getLocation() {
  console.log("In geolocation");
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    print("Browser doesn't support geolocation");
  }
}

function showPosition(position) {
  console.log("in show position");
  var dest_lat = position.coords.latitude;
  var dest_long = position.coords.longitude;

  var url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + dest_lat + ',' + dest_long + '&sensor=false';
  $.get(url, function(data) {
    alert(JSON.stringify(data));
  });
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download