Create and display OpenLayers map

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">

<button type="button" id="make">Make maps</button>

<br />

<div id="map0" class="map"></div>
<div id="map1" class="map"></div>
<div id="map2" class="map"></div>
<div id="map3" class="map"></div>
<div id="map4" class="map"></div>

CSS

.map {
  width: 200px;
  height: 200px;
  display: inline-block;
}

JavaScript

var olmaps = [];

function remakeMaps() {
  if (olmaps.length >= 0) {
    for (var olmap of olmaps) {
      olmap.setTarget(null);
      olmap = null;
    }
    olmaps = [];
  }
  for (var i = 0; i < 5; i++) {
    var olmap = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM(),
        }),
      ],
      interactions: [new ol.interaction.MouseWheelZoom()],
      //interactions: [],
      target: 'map' + i,
      view: new ol.View({
        center: [2000000, 6000000],
        zoom: 5,
      }),
    });
    olmaps.push(olmap);
  }
}

document.getElementById('make').addEventListener('click', () => remakeMaps());

remakeMaps();