diff --git a/django/contrib/gis/forms/widgets.py b/django/contrib/gis/forms/widgets.py
index 5f169e9cb3..49ca48794b 100644
--- a/django/contrib/gis/forms/widgets.py
+++ b/django/contrib/gis/forms/widgets.py
@@ -102,12 +102,12 @@ class OpenLayersWidget(BaseGeometryWidget):
     class Media:
         css = {
             "all": (
-                "https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css",
+                "https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css",
                 "gis/css/ol3.css",
             )
         }
         js = (
-            "https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js",
+            "https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js",
             "gis/js/OLMapWidget.js",
         )
 
diff --git a/django/contrib/gis/static/gis/js/OLMapWidget.js b/django/contrib/gis/static/gis/js/OLMapWidget.js
index fe944a4a87..b750327409 100644
--- a/django/contrib/gis/static/gis/js/OLMapWidget.js
+++ b/django/contrib/gis/static/gis/js/OLMapWidget.js
@@ -1,39 +1,40 @@
 /* global ol */
 'use strict';
-function GeometryTypeControl(opt_options) {
+class GeometryTypeControl extends ol.control.Control {
     // Map control to switch type when geometry type is unknown
-    const options = opt_options || {};
+    constructor(opt_options) {
+        const options = opt_options || {};
 
-    const element = document.createElement('div');
-    element.className = 'switch-type type-' + options.type + ' ol-control ol-unselectable';
-    if (options.active) {
-        element.classList.add("type-active");
-    }
-
-    const self = this;
-    const switchType = function(e) {
-        e.preventDefault();
-        if (options.widget.currentGeometryType !== self) {
-            options.widget.map.removeInteraction(options.widget.interactions.draw);
-            options.widget.interactions.draw = new ol.interaction.Draw({
-                features: options.widget.featureCollection,
-                type: options.type
-            });
-            options.widget.map.addInteraction(options.widget.interactions.draw);
-            options.widget.currentGeometryType.element.classList.remove('type-active');
-            options.widget.currentGeometryType = self;
+        const element = document.createElement('div');
+        element.className = 'switch-type type-' + options.type + ' ol-control ol-unselectable';
+        if (options.active) {
             element.classList.add("type-active");
         }
-    };
 
-    element.addEventListener('click', switchType, false);
-    element.addEventListener('touchstart', switchType, false);
+        super({
+            element: element,
+            target: options.target
+        });
+        const self = this;
+        const switchType = function(e) {
+            e.preventDefault();
+            if (options.widget.currentGeometryType !== self) {
+                options.widget.map.removeInteraction(options.widget.interactions.draw);
+                options.widget.interactions.draw = new ol.interaction.Draw({
+                    features: options.widget.featureCollection,
+                    type: options.type
+                });
+                options.widget.map.addInteraction(options.widget.interactions.draw);
+                options.widget.currentGeometryType.element.classList.remove('type-active');
+                options.widget.currentGeometryType = self;
+                element.classList.add("type-active");
+            }
+        };
 
-    ol.control.Control.call(this, {
-        element: element
-    });
-};
-ol.inherits(GeometryTypeControl, ol.control.Control);
+        element.addEventListener('click', switchType, false);
+        element.addEventListener('touchstart', switchType, false);
+    }
+}
 
 // TODO: allow deleting individual features (#8972)
 class MapWidget {
diff --git a/docs/releases/4.2.txt b/docs/releases/4.2.txt
index 755ebcb717..b5a7e61f6f 100644
--- a/docs/releases/4.2.txt
+++ b/docs/releases/4.2.txt
@@ -149,6 +149,9 @@ Minor features
   removes the former ``map_css`` block) to better comply with a strict Content
   Security Policy.
 
+* :class:`~django.contrib.gis.forms.widgets.OpenLayersWidget` is now based on
+  OpenLayers 7.2.2 (previously 4.6.5).
+
 :mod:`django.contrib.messages`
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
diff --git a/js_tests/gis/mapwidget.test.js b/js_tests/gis/mapwidget.test.js
index 8991738c6c..e0cc617a1e 100644
--- a/js_tests/gis/mapwidget.test.js
+++ b/js_tests/gis/mapwidget.test.js
@@ -33,7 +33,7 @@ QUnit.test('MapWidget.defaultCenter', function(assert) {
         '6.81,47.08',
         'Default center at 6.81, 47.08'
     );
-    assert.equal(widget.map.getView().getZoom(), 17);
+    assert.equal(Math.round(widget.map.getView().getZoom()), 17);
 });
 
 QUnit.test('MapWidget.interactions', function(assert) {
diff --git a/js_tests/tests.html b/js_tests/tests.html
index 61bc4ac102..c3c1055c9a 100644
--- a/js_tests/tests.html
+++ b/js_tests/tests.html
@@ -157,7 +157,7 @@
         <textarea id="id_multipolygon" name="multipolygon" class="vSerializedField required"
                   style="display:none;" rows="10" cols="150"></textarea>
     </div>
-    <script src='https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js'></script>
+    <script src='https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js'></script>
     <script src='../django/contrib/gis/static/gis/js/OLMapWidget.js' data-cover></script>
     <script src='./gis/mapwidget.test.js'></script>