diff --git a/examples/external-map.html b/examples/external-map.html
new file mode 100644
index 0000000000..b372bf43f2
--- /dev/null
+++ b/examples/external-map.html
@@ -0,0 +1,11 @@
+---
+layout: example.html
+title: External map
+shortdesc: Show a map in a separate window.
+docs: >
+
+tags: "external, window"
+resources:
+---
+
+
diff --git a/examples/external-map.js b/examples/external-map.js
new file mode 100644
index 0000000000..b5ee6d1b8c
--- /dev/null
+++ b/examples/external-map.js
@@ -0,0 +1,47 @@
+import Map from '../src/ol/Map.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import {fromLonLat} from '../src/ol/proj.js';
+
+const map = new Map({
+ target: 'map',
+ layers: [
+ new TileLayer({
+ source: new OSM(),
+ }),
+ ],
+ view: new View({
+ center: fromLonLat([37.41, 8.82]),
+ zoom: 4,
+ }),
+});
+
+let mapWindow;
+const button = document.getElementById('extMap');
+button.addEventListener('click', function () {
+ const localMapTarget = document.getElementById('map');
+ localMapTarget.style.height = '0px';
+ button.disabled = true;
+
+ mapWindow = window.open(
+ 'resources/external-map-map.html',
+ 'MapWindow',
+ 'toolbar=0,location=0,menubar=0,width=800,height=600'
+ );
+ mapWindow.addEventListener('load', function () {
+ const extMapDiv = mapWindow.document.getElementById('map');
+ map.setTarget(extMapDiv);
+ });
+ mapWindow.addEventListener('beforeunload', function () {
+ localMapTarget.style.height = '';
+ map.setTarget(localMapTarget);
+ button.disabled = false;
+ mapWindow = undefined;
+ });
+});
+window.addEventListener('beforeunload', function () {
+ if (mapWindow) {
+ mapWindow.close();
+ }
+});
diff --git a/examples/extmap-main.html b/examples/extmap-main.html
deleted file mode 100644
index 16a6a4693b..0000000000
--- a/examples/extmap-main.html
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
-
-
-
-
- OpenLayers example
-
-
- External map window test case
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/examples/extmap-map.html b/examples/extmap-map.html
deleted file mode 100644
index 0b02d97932..0000000000
--- a/examples/extmap-map.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/examples/extmap.js b/examples/extmap.js
deleted file mode 100644
index fc770a9c15..0000000000
--- a/examples/extmap.js
+++ /dev/null
@@ -1,13 +0,0 @@
- var map = new ol.Map({
- target: 'map',
- layers: [
- new ol.layer.Tile({
- source: new ol.source.OSM()
- })
- ],
- view: new ol.View({
- center: ol.proj.fromLonLat([37.41, 8.82]),
- zoom: 4
- })
- });
-
\ No newline at end of file
diff --git a/examples/resources/external-map-map.html b/examples/resources/external-map-map.html
new file mode 100644
index 0000000000..4d3ca1fc5b
--- /dev/null
+++ b/examples/resources/external-map-map.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+