JavaScript : Get user location

Question

I am trying to get user location . But there is an error like this

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.

This is the part of code that tries to get location

  function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 6
  });
  var infoWindow = new google.maps.InfoWindow({map: map});

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found.');
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}

Is there a way to get getlocation using HTTP server (not HTTPS).

You can use services like http://ipinfo.io/developers/full-ip-details to find location from ip address, if that is what you like. — Agney, Jan 01 '17 at 10:48
On the contrary, it can be really erratic at times. Why do you hate HTTPS so much? — Agney, Jan 01 '17 at 10:53
I am doing some tests on my computer :) and my computer is the server . And I dont know how to make that test website HTTPS) — user3578286, Jan 01 '17 at 10:55
https://www.browsersync.io/ gives you an HTTPS server to play with. There will probably be a warning on Chrome though — Agney, Jan 01 '17 at 10:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/132004/discussion-between-user3578286-and-boy-with-silver-wings). — user3578286, Jan 01 '17 at 11:08

score 2 · Answer 1 · answered Jan 01 '17 at 10:44

No, specifically in Chrome.

In order to get user location in the browser u must be under HTTPS.

If you are using Cordova and creating mobile app you can access the location without https, using native features.

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/#cordova-plugin-geolocation

Also you may use free HTTPS service : https://letsencrypt.org/

score 1 · Answer 2 · edited May 23 '17 at 12:01

Chrome has removed the Geolocation API usage from insecure origins from Chrome 50. You can read about it Here. There are basically three workarounds depending on what you are trying to achieve.

Use IP Location Services

These use the users IP address to find their location. Sites like IPInfo for this purpose. However these can be really erratic at times and may not provide the accurate location if you need one.

Use Google Maps Geolocation API

This obviously comes with usage limits. You can limit it to being a fallback option with the answer https://stackoverflow.com/a/37276372/4374566

Use BrowserSync

If your only issue is getting it to work on the localhost(because your site would have https) then using the Browsersync test server is a boon. After installing Browsersync with

npm install -g browser-sync

You can start a secure server from command line with

browser-sync start --https

This will throw a warning page first time on Chrome (They are really looking out for us), but you can skip that.

However amidst all the workarounds it is really possible that other Browsers are looking to implement the same. Here is Firefox. So the best solution might be to get an HTTPS certificate for the site with services like Let's Encrypt.

score 1 · Answer 3 · answered Jul 01 '19 at 18:51

Here is a working example to get user location with JavaScript.

Live CodePen Demo

HTML

<div id="nudge">
  <p>YO CAN I GET YOUR LOCATION?</p>
  <button id="theButton">yes</button>
</div>

<span id="startLat"></span>
<span id="startLon"></span>

JavaScript

var button = document.getElementById('theButton');
var nudge = document.getElementById("nudge");
var latitude = document.getElementById('startLat');
var longitude = document.getElementById('startLon');

button.onclick = function() {
  var startPos;
  var showNudgeBanner = function() { nudge.style.display = "block"; };
  var hideNudgeBanner = function() { nudge.style.display = "none"; };
  var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);

  var geoSuccess = function(position) {
    hideNudgeBanner(); clearTimeout(nudgeTimeoutId); startPos = position;
    latitude.innerHTML = startPos.coords.latitude;
    longitude.innerHTML = startPos.coords.longitude;
  };

  var geoFail = function(error) {
    switch (error.code) { case error.TIMEOUT: showNudgeBanner(); break; } };
    navigator.geolocation.getCurrentPosition(geoSuccess, geoFail);
};

JavaScript : Get user location

3 Answers3