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

Question

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 fea

Answer 1

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));
  });
}