CODEWITHSUNDEEP
htmlgeolocation
Niranth Reddy
Niranth Reddy

Reputation: 493

Geolocation Without SSL connection

I am developing an application which uses geolocation coordinates. I used the HTML5 geolocation feature to find out the location of the site visitor, but the issue is with Chrome which doesnt support GeoLocation on insecure origins.

  function showPosition(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(position){
            var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
            document.getElementById("result").innerHTML = positionInfo;
        });
    } else{
        alert("Sorry, your browser does not support HTML5 geolocation.");
    }
}

Here is the code getCurrentPosition is not working in as my site is not SSL connected .

Warning by Chrome : 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.

Is there any other way to get coordinates/LatLong values on chrome ? [on Insecure connection only]

EDIT : It is working in my machine using localhost:80 but not working in test url which is on http

Upvotes: 25

Views: 50750

Answers (4)

Aryeh Beitz
Aryeh Beitz

Reputation: 2078

Really simple: open Chrome, open this address and enter the domains you wish to enable for

chrome://flags/#unsafely-treat-insecure-origin-as-secure

enter image description here

This way it's permanent and you don't need to open the chrome browser each time with

google-chrome --args --unsafely-treat-insecure-origin-as-secure="http://whatever.test"

as answered above.

Upvotes: 38

stackPusher
stackPusher

Reputation: 6512

Chrome now prevents untrusted sites from using html5 geolocation. Trusted sites include localhostor any https certified domain. In my case neither of these were possible so instead i opened chrome from the command line with this argument: open -a /Applications/Google\ Chrome.app' --args --unsafely-treat-insecure-origin-as-secure="http://yoursite.test" Which added my particular domain as a trusted site.

Upvotes: 12

Eckonator
Eckonator

Reputation: 107

Here is my non SSL solution for Safari in 2017/05

var apiGeolocationSuccess = function(position) {
    alert("API geolocation success!\n\nlat = " + position.coords.latitude + "\nlng = " + position.coords.longitude);
};

var tryAPIGeolocation = function() {
    jQuery.post( "https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyDCa1LUe1vOczX1hO_iGYgyo8p_jYuGOPU", function(success) {
        apiGeolocationSuccess({coords: {latitude: success.location.lat, longitude: success.location.lng}});
    })
        .fail(function(err) {
            alert("API Geolocation error! \n\n"+err);
        });
};

var browserGeolocationSuccess = function(position) {
    alert("Browser geolocation success!\n\nlat = " + position.coords.latitude + "\nlng = " + position.coords.longitude);
};

var browserGeolocationFail = function(error) {
    switch (error.code) {
        case error.TIMEOUT:
            alert("Browser geolocation error !\n\nTimeout.");
            break;
        case error.PERMISSION_DENIED:
            if(error.message.indexOf("Only secure origins are allowed") == 0) {
                tryAPIGeolocation();
            }
            break;
        case error.POSITION_UNAVAILABLE:
            // dirty hack for safari
            if(error.message.indexOf("Origin does not have permission to use Geolocation service") == 0) {
                tryAPIGeolocation();
            } else {
                alert("Browser geolocation error !\n\nPosition unavailable.");
            }
            break;
    }
};

var tryGeolocation = function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            browserGeolocationSuccess,
            browserGeolocationFail,
            {maximumAge: 50000, timeout: 20000, enableHighAccuracy: true});
    }
};

tryGeolocation();

The new part is this one in "case error.POSITION_UNAVAILABLE":

case error.POSITION_UNAVAILABLE:
// dirty hack for safari
if(error.message.indexOf("Origin does not have permission to use Geolocation service") == 0) {
    tryAPIGeolocation();
} else {
    alert("Browser geolocation error !\n\nPosition unavailable.");
}
break;

Upvotes: 4

Mannan Bahelim
Mannan Bahelim

Reputation: 1355

var apiGeolocationSuccess = function(position) {
    alert("API geolocation success!\n\nlat = " + position.coords.latitude + "\nlng = " + position.coords.longitude);
};

var tryAPIGeolocation = function() {
    jQuery.post( "https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyDCa1LUe1vOczX1hO_iGYgyo8p_jYuGOPU", function(success) {
        apiGeolocationSuccess({coords: {latitude: success.location.lat, longitude: success.location.lng}});
  })
  .fail(function(err) {
    alert("API Geolocation error! \n\n"+err);
  });
};

var browserGeolocationSuccess = function(position) {
    alert("Browser geolocation success!\n\nlat = " + position.coords.latitude + "\nlng = " + position.coords.longitude);
};

var browserGeolocationFail = function(error) {
  switch (error.code) {
    case error.TIMEOUT:
      alert("Browser geolocation error !\n\nTimeout.");
      break;
    case error.PERMISSION_DENIED:
      if(error.message.indexOf("Only secure origins are allowed") == 0) {
        tryAPIGeolocation();
      }
      break;
    case error.POSITION_UNAVAILABLE:
      alert("Browser geolocation error !\n\nPosition unavailable.");
      break;
  }
};

var tryGeolocation = function() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        browserGeolocationSuccess,
      browserGeolocationFail,
      {maximumAge: 50000, timeout: 20000, enableHighAccuracy: true});
  }
};

tryGeolocation();

Upvotes: 14

Related Questions