diff --git a/examples/nuxt-app/test/features/maps/maps.feature b/examples/nuxt-app/test/features/maps/maps.feature
index f2458a8528..0d0584a39a 100644
--- a/examples/nuxt-app/test/features/maps/maps.feature
+++ b/examples/nuxt-app/test/features/maps/maps.feature
@@ -119,3 +119,15 @@ Feature: Custom collection map component
     Given I visit the page "/map"
     And I wait 2 seconds
     Then the map matches the image snapshot "map-custom-default-extent"
+
+  @mockserver
+  Scenario: Map can be viewed fullscreen
+    Given I load the page fixture with "/maps/basic-page"
+    And the page endpoint for path "/map" returns the loaded fixture
+    And I visit the page "/map"
+    When I click the view fullscreen button
+    And I wait 100 milliseconds
+    Then the map should be fullscreen
+    When I click the exit fullscreen button
+    And I wait 100 milliseconds
+    Then the map should not be fullscreen
diff --git a/examples/nuxt-app/test/support/step_definitions/index.ts b/examples/nuxt-app/test/support/step_definitions/index.ts
index a1e1f39a45..42bbbda2a0 100644
--- a/examples/nuxt-app/test/support/step_definitions/index.ts
+++ b/examples/nuxt-app/test/support/step_definitions/index.ts
@@ -1,5 +1,7 @@
+import 'cypress-real-events'
 import '@dpc-sdp/ripple-test-utils/step_definitions'
 import '@frsource/cypress-plugin-visual-regression-diff'
+
 Cypress.on('uncaught:exception', (err) => {
   // https://stackoverflow.com/a/50387233
   // Ignore Resize observer loop issue in expand search filters for now
diff --git a/packages/ripple-test-utils/package.json b/packages/ripple-test-utils/package.json
index 9a5d32bcf1..2423718a15 100644
--- a/packages/ripple-test-utils/package.json
+++ b/packages/ripple-test-utils/package.json
@@ -28,6 +28,7 @@
     "@frsource/cypress-plugin-visual-regression-diff": "^3.3.10",
     "@testing-library/cypress": "^10.0.1",
     "cypress": "^13.6.6",
+    "cypress-real-events": "^1.13.0",
     "mockttp": "^3.9.1",
     "start-server-and-test": "^2.0.3"
   }
diff --git a/packages/ripple-test-utils/step_definitions/components/maps.ts b/packages/ripple-test-utils/step_definitions/components/maps.ts
index a03fce66a3..195acad7c5 100644
--- a/packages/ripple-test-utils/step_definitions/components/maps.ts
+++ b/packages/ripple-test-utils/step_definitions/components/maps.ts
@@ -237,3 +237,23 @@ Given('the following default extent is used', (dataTable: DataTable) => {
     ])
   })
 })
+
+When('I click the view fullscreen button', () => {
+  cy.get('.rpl-map__control button[title="View full screen"]').realClick()
+})
+
+When('I click the exit fullscreen button', () => {
+  cy.get('.rpl-map__control button[title="Exit full screen"]').realClick()
+})
+
+Then('the map should be fullscreen', () => {
+  cy.document().then((doc) => {
+    expect(doc.fullscreenElement).to.not.be.null
+  })
+})
+
+Then('the map should not be fullscreen', () => {
+  cy.document().then((doc) => {
+    expect(doc.fullscreenElement).to.be.null
+  })
+})
diff --git a/packages/ripple-ui-maps/src/components/map/RplMap.vue b/packages/ripple-ui-maps/src/components/map/RplMap.vue
index 03e64be595..c14c3b7b5e 100644
--- a/packages/ripple-ui-maps/src/components/map/RplMap.vue
+++ b/packages/ripple-ui-maps/src/components/map/RplMap.vue
@@ -16,7 +16,6 @@ import {
   watch,
   nextTick
 } from 'vue'
-import { useFullscreen } from '@vueuse/core'
 import { withDefaults, defineExpose } from '@vue/composition-api'
 import { Map } from 'ol'
 import { Zoom } from 'ol/control'
@@ -140,10 +139,14 @@ const selectedPinStyle = (feature, style) => {
   return style
 }
 
-const { isFullscreen } = useFullscreen()
-
-const { onHomeClick, onZoomInClick, onZoomOutClick, onFullScreenClick } =
-  useMapControls(mapRef)
+const {
+  onHomeClick,
+  onZoomInClick,
+  onZoomOutClick,
+  onFullScreenClick,
+  isFullScreen,
+  supportsFullScreen
+} = useMapControls(mapRef)
 
 const mapFeatures = computed(() => {
   if (Array.isArray(props.features)) {
@@ -288,6 +291,10 @@ onMounted(() => {
 })
 
 const noResultsRef = ref(null)
+
+const fullScreenLabel = computed(() =>
+  isFullScreen.value ? 'Exit full screen' : 'View full screen'
+)
 </script>
 
 <template>
@@ -406,9 +413,12 @@ const noResultsRef = ref(null)
           </RplMapPopUp>
         </ol-overlay>
       </slot>
-      <div class="rpl-map__control rpl-map__control-fullscreen">
-        <button title="View map fullscreen" @click="onFullScreenClick">
-          <RplIcon v-if="isFullscreen" name="icon-cancel"></RplIcon>
+      <div
+        v-if="supportsFullScreen"
+        class="rpl-map__control rpl-map__control-fullscreen"
+      >
+        <button :title="fullScreenLabel" @click="onFullScreenClick">
+          <RplIcon v-if="isFullScreen" name="icon-cancel"></RplIcon>
           <RplIcon v-else name="icon-enlarge" size="m"></RplIcon>
         </button>
       </div>
diff --git a/packages/ripple-ui-maps/src/composables/useMapControls.ts b/packages/ripple-ui-maps/src/composables/useMapControls.ts
index 9a57da691e..11f948d7a0 100644
--- a/packages/ripple-ui-maps/src/composables/useMapControls.ts
+++ b/packages/ripple-ui-maps/src/composables/useMapControls.ts
@@ -1,10 +1,14 @@
-import { inject } from 'vue'
+import { inject, ref, onMounted } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { easeOut } from 'ol/easing'
 import { fitDefaultExtent } from './../components/map/utils.ts'
 
 export default (mapRef) => {
   const { deadSpace, defaultExtent } = inject('rplMapInstance')
 
+  const isFullScreen = ref(false)
+  const supportsFullScreen = ref(false)
+
   /**
    * @param {number} delta Zoom delta.
    * @private
@@ -50,7 +54,7 @@ export default (mapRef) => {
    * @param {Document} doc The root document to check.
    * @return {boolean} Element is currently in fullscreen.
    */
-  function isFullScreen(doc) {
+  function isFullScreenActive(doc) {
     return !!(doc['webkitIsFullScreen'] || doc.fullscreenElement)
   }
 
@@ -100,7 +104,7 @@ export default (mapRef) => {
       return
     }
 
-    if (isFullScreen(doc)) {
+    if (isFullScreenActive(doc)) {
       exitFullScreen(doc)
     } else {
       const element = map.getTargetElement()
@@ -125,10 +129,27 @@ export default (mapRef) => {
     handleFullScreen()
   }
 
+  function handleFullScreenChange() {
+    if (!mapRef.value.map) return
+
+    const doc = mapRef.value.map.getOwnerDocument()
+    isFullScreen.value = isFullScreenActive(doc)
+  }
+
+  onMounted(() => {
+    // Listen to fullscreen change events and update isFullScreen
+    useEventListener(document, 'fullscreenchange', handleFullScreenChange)
+    useEventListener(document, 'webkitfullscreenchange', handleFullScreenChange)
+
+    supportsFullScreen.value = isFullScreenSupported(document)
+  })
+
   return {
     onHomeClick,
     onZoomInClick,
     onZoomOutClick,
-    onFullScreenClick
+    onFullScreenClick,
+    supportsFullScreen,
+    isFullScreen
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca1b0530d1..7bffda0014 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -577,6 +577,9 @@ importers:
       cypress:
         specifier: ^13.6.6
         version: 13.6.6
+      cypress-real-events:
+        specifier: ^1.13.0
+        version: 1.13.0(cypress@13.6.6)
       mockttp:
         specifier: ^3.9.1
         version: 3.9.1(encoding@0.1.13)
@@ -7585,6 +7588,11 @@ packages:
     resolution: {integrity: sha512-YGZxdTTL9lmLkCUTpg4j0zQ7IhRB5ZmqNBbGCl3Tg6MP/d5/6sY7L5mmTjzbc6JKgVZYiqTQTNhPFsbXNGlRaA==}
     engines: {node: '>=0.8'}
 
+  cypress-real-events@1.13.0:
+    resolution: {integrity: sha512-LoejtK+dyZ1jaT8wGT5oASTPfsNV8/ClRp99ruN60oPj8cBJYod80iJDyNwfPAu4GCxTXOhhAv9FO65Hpwt6Hg==}
+    peerDependencies:
+      cypress: ^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x || ^13.x
+
   cypress@13.6.6:
     resolution: {integrity: sha512-S+2S9S94611hXimH9a3EAYt81QM913ZVA03pUmGDfLTFa5gyp85NJ8dJGSlEAEmyRsYkioS1TtnWtbv/Fzt11A==}
     engines: {node: ^16.0.0 || ^18.0.0 || >=20.0.0}
@@ -7990,9 +7998,6 @@ packages:
   domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
 
-  domutils@3.0.1:
-    resolution: {integrity: sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==}
-
   domutils@3.1.0:
     resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
 
@@ -25652,6 +25657,10 @@ snapshots:
       find-pkg: 0.1.2
       fs-exists-sync: 0.1.0
 
+  cypress-real-events@1.13.0(cypress@13.6.6):
+    dependencies:
+      cypress: 13.6.6
+
   cypress@13.6.6:
     dependencies:
       '@cypress/request': 3.0.1
@@ -26065,12 +26074,6 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 4.3.1
 
-  domutils@3.0.1:
-    dependencies:
-      dom-serializer: 2.0.0
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-
   domutils@3.1.0:
     dependencies:
       dom-serializer: 2.0.0
@@ -27968,7 +27971,7 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
       domhandler: 5.0.3
-      domutils: 3.0.1
+      domutils: 3.1.0
       entities: 4.5.0
 
   htmlparser2@9.1.0: