Geolocation in javascript on iOS Safari

Question

My objective is to return the coordinates of my geolocation using Safari on an iOS device. On my desktop browser, I am calling the function tryGeolocation() below with a Google Maps Geolocation API key.

This works on desktop Chrome, but in Safari (Desktop and iOS) and Chrome (iOS) I am returned the "Position Unavailable" error. I have tried with a 5 and 10 second timeout, but the same happens.

Is there a known workaround for calling the Google Maps Geolocation API in iOS?

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="MY API KEY", 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();

I am new to working with iOS browsers so any suggestions would be appreciated !!

Answer 1

Here is the example with Permissions and Navigation APIs involved

Remember, it works ONLY IF the host is using HTTPS. That may the cause of the permission alert not showing up due to your comment to an answer below.

Remember if your host does not use HTTPS, it will timeout to an error about authentication failure. Use error callback to check that.

if ( navigator.permissions && navigator.permissions.query) {
  //try permissions APIs first
  navigator.permissions.query({ name: 'geolocation' }).then(function(result) {
      // Will return ['granted', 'prompt', 'denied']
      const permission = result.state;
      if ( permission === 'granted' || permission === 'prompt' ) {
          _onGetCurrentLocation();
      }
  });
} else if (navigator.geolocation) {
  //then Navigation APIs
  _onGetCurrentLocation();
}

function _onGetCurrentLocation () {
    const options = {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
    };
    navigator.geolocation.getCurrentPosition( function (position) {
        //use coordinates
        const marker = { 
          lat: position.coords.latitude, 
          lng: position.coords.longitude 
        };
    }, function (error) {
      //error handler here
    }, options)
}

Answer 2

if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
          };
          latt=pos.lat;
          lngg=pos.lng;
          console.log("point :"+latt+","+lngg);
        }, function() {
        });
      } else {
        // Browser doesn't support Geolocation
      }



      this.restapiService.getAllSearchResults()
      .then(data => {

              this.map = new google.maps.Map(this.mapElement.nativeElement, {
                zoom: 100,
                center: {lat: parseFloat(pos.lat), lng: parseFloat(pos.lng)}
              });

        var position = new google.maps.LatLng(parseFloat(pos.lat), parseFloat(pos.lng));
        var sMarker = new google.maps.Marker({position: position,animation: google.maps.Animation.DROP, title: "My Location"});
        sMarker.setMap(this.map);
      });
    }

You can try this to get current position [tested on iOS (Browser emulator-ionic)]