diff --git a/src/css/mapbox-gl.css b/src/css/mapbox-gl.css
index 5657b507262..be30547d57f 100644
--- a/src/css/mapbox-gl.css
+++ b/src/css/mapbox-gl.css
@@ -106,14 +106,14 @@
     padding: 0;
 }
 
-.mapboxgl-ctrl > button:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-}
-
 .mapboxgl-ctrl-group > button:focus {
     box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
 }
 
+.mapboxgl-ctrl > button:not(:disabled):hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
 .mapboxgl-ctrl-group > button:focus:focus-visible {
     box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
 }
@@ -166,8 +166,8 @@
     height: 100%;
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate::before:disabled {
-    background-image: svg-load('svg/mapboxgl-ctrl-geolocate.svg', fill=#aaa);
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate:disabled::before {
+    background-image: svg-load('svg/mapboxgl-ctrl-geolocate-disabled.svg', fill=#aaa);
 }
 
 .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active::before {
diff --git a/src/css/svg/mapboxgl-ctrl-geolocate-disabled.svg b/src/css/svg/mapboxgl-ctrl-geolocate-disabled.svg
new file mode 100644
index 00000000000..697a298e039
--- /dev/null
+++ b/src/css/svg/mapboxgl-ctrl-geolocate-disabled.svg
@@ -0,0 +1,4 @@
+<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+  <path d="M14.434,7.688c0.213,0.407 0.371,0.848 0.466,1.312l0.1,0c0,0 1,0 1,1c0,1 -1,1 -1,1l-0.1,0c-0.4,1.96 -1.94,3.5 -3.9,3.9l0,0.1c0,0 0,1 -1,1c-1,0 -1,-1 -1,-1l0,-0.1c-0.477,-0.097 -0.93,-0.262 -1.347,-0.484c0.383,-0.377 0.767,-0.753 1.151,-1.129c0.374,0.138 0.777,0.213 1.196,0.213c1.92,0 3.5,-1.58 3.5,-3.5c0,-0.403 -0.07,-0.791 -0.197,-1.153c0.379,-0.384 0.756,-0.77 1.131,-1.159Zm-9.334,1.312c0.4,-1.961 1.94,-3.5 3.9,-3.9l0,-0.1c0,0 0,-1 1,-1c1,0 1,1 1,1l0,0.1c0.477,0.097 0.93,0.262 1.347,0.484c-0.383,0.377 -0.767,0.753 -1.151,1.129c-0.374,-0.138 -0.777,-0.213 -1.196,-0.213c-1.92,0 -3.5,1.58 -3.5,3.5c0,0.403 0.07,0.791 0.197,1.153c-0.379,0.384 -0.756,0.77 -1.131,1.159c-0.213,-0.407 -0.371,-0.848 -0.466,-1.312l-0.1,0c-0.005,0 -1,-0.003 -1,-1c0,-0.997 0.995,-1 1,-1l0.1,0Z" />
+  <path d="M14,5l1,1l-9,9l-1,-1l9,-9Z" />
+</svg>
diff --git a/src/ui/control/geolocate_control.js b/src/ui/control/geolocate_control.js
index eca7accc8df..7c2b59215e8 100644
--- a/src/ui/control/geolocate_control.js
+++ b/src/ui/control/geolocate_control.js
@@ -92,10 +92,10 @@ class GeolocateControl extends Evented {
     options: Options;
     _container: HTMLElement;
     _dotElement: HTMLElement;
-    _geolocateButton: HTMLElement;
+    _geolocateButton: HTMLButtonElement;
     _geolocationWatchID: number;
     _timeoutId: ?TimeoutID;
-    _watchState: string;
+    _watchState: 'OFF' | 'ACTIVE_LOCK' | 'WAITING_ACTIVE' | 'ACTIVE_ERROR' | 'BACKGROUND' | 'BACKGROUND_ERROR';
     _lastKnownPosition: any;
     _userLocationDotMarker: Marker;
     _setup: boolean; // set to true once the control has been setup
@@ -263,6 +263,9 @@ class GeolocateControl extends Evented {
                 this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active-error');
                 this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background');
                 this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background-error');
+                this._geolocateButton.disabled = true;
+                this._geolocateButton.title = 'Location not available';
+                this._geolocateButton.setAttribute('aria-label', 'Location not available');
 
                 if (this._geolocationWatchID !== undefined) {
                     this._clearWatch();
@@ -287,10 +290,6 @@ class GeolocateControl extends Evented {
     }
 
     _setupUI(supported: boolean) {
-        if (supported === false) {
-            warnOnce('Geolocation support is not available, the GeolocateControl will not be visible.');
-            return;
-        }
         this._container.addEventListener('contextmenu', (e: MouseEvent) => e.preventDefault());
         this._geolocateButton = DOM.create('button',
             `${className}-icon ${className}-geolocate`,
@@ -298,6 +297,12 @@ class GeolocateControl extends Evented {
         this._geolocateButton.type = 'button';
         this._geolocateButton.title = 'Find my location';
         this._geolocateButton.setAttribute('aria-label', 'Find my location');
+        if (supported === false) {
+            warnOnce('Geolocation support is not available so the GeolocateControl will be disabled.');
+            this._geolocateButton.disabled = true;
+            this._geolocateButton.title = 'Location not available';
+            this._geolocateButton.setAttribute('aria-label', 'Location not available');
+        }
 
         if (this.options.trackUserLocation) {
             this._geolocateButton.setAttribute('aria-pressed', 'false');