Mapbox GL JS: Geolocation not working in Chrome?

Question

I've added a Mapbox geolocation control to my map by following the example. My code looks as follows:

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    minZoom: 5,
    maxZoom: 14,
    center: [-2.0, 53.3],
});
map.addControl(new mapboxgl.GeolocateControl());

The control appears and geolocation works fine on Chrome when the page is at localhost. It also works fine when the page has been uploaded to my web server on Firefox and Safari.

But using Chrome to access the page on the web server, no control appears, and inspecting the source the control's HTML is empty:

<div class="mapboxgl-ctrl mapboxgl-ctrl-group"></div>

whereas on localhost the HTML looks like this:

<div class="mapboxgl-ctrl mapboxgl-ctrl-group">
  <button class="mapboxgl-ctrl-icon mapboxgl-ctrl-geolocate" 
   type="button" aria-label="Geolocate"></button>
</div>

There are no console errors in Chrome, and all the rest of the map is working perfectly fine: it's simply that the control does not appear. I have checked Chrome's content location settings, and the site isn't blocked for asking for a location.

Are you able to post your code online somewhere? It is very difficult to debug without being able to see it! — Lucas Wojciechowski
If you serve the page from an HTTP domain, Chrome won't allow geolocation. Maybe Mapbox-GL-JS hides the control in that case? You need to serve from HTTPS. — Steve Bennett

Kam Dane Kam Dane · Accepted Answer · 2017-11-23T21:07:03

... unfortunately, even if the server is on https, chrome refuse geolocation from Mapbox, try this example :

https://www.mapbox.com/mapbox-gl-js/example/locate-user/

Here the location is setted by default as Ask

And I never refused to get my location it's weird, I tested on FireFox and Safari, it works perfectly !

Mapbox GL JS: Geolocation not working in Chrome?

1 Answers