Custom Popup for get my current location

Question

My current site is fully depends on the current location. Right now i am using geolocation for getting current location. But in current situation user is confused about the share location. So i want to created one custom pop-up (bootstrap) for get current location of the clients PC.

My current code is as below:

function getLocation() {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, error, {enableHighAccuracy:true,timeout:60000,maximumAge:0});
    }
    else {
        console.log("Geolocation is not supported by this browser.");
    }
}

function error(error) {
    console.log(error);
}

function showPosition(position) {

    var latitude = position.coords.latitude,
    longitude = position.coords.longitude;

    console.log(latitude);
    console.log(longitude);
}

Please help me on this concern.

if you're want to use bootstrap, read about their modals, it's pretty easy to create — Roljhon, Jan 12 '17 at 11:56
@Teemu The code is working fine but i want to create custom popup for get geolocation permission rather than custom location popup from the user. — Rav's Patel, Jan 12 '17 at 12:01
@Roljhon Yes i have idea about the bootstrap model. But to create custom pop-up for get permission for the clients PC permission. I have search a lot for the same but i am not able to fine any way to do it. — Rav's Patel, Jan 12 '17 at 12:04

score 4 · Answer 1 · edited May 23 '17 at 12:16

There is now way to go around the browser's geolocation permission popup. On Chrome, it looks like this:

Chrome geolocation example

The user will need to click Allow before you can read their location (this is a security feature). However, if you absolutely need it, you could detect if the permission has been denied and explain to the user how to grant permission and why it's important.

See this answer to a similar question and this example to detect "permission denied" errors:

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, positionError);
  } else {
    console.log("Geolocation is not supported by this browser.");
  }
}

function showPosition(position) {
  // Success, can use position.
  console.log("Your position is: " + position);
}

function positionError(error) {
  if (error.PERMISSION_DENIED) {
    console.log("Error: permission denied");
    // Your custom modal here.
    showError('Geolocation is not enabled. Please enable to use this feature.');
  } else {
    // Handle other kinds of errors.
    console.log("Other kind of error: " + error);
  }
}

function showError(message) {
  // TODO
}

getLocation();

Custom Popup for get my current location

1 Answers1