JSFiddle - React, Tailwind, and code Playground

by Kenny806

HTML

<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css">
<div style="width:20%; height:20%; border: 1px solid;" id="map1"></div>
<div style="width:20%; height:20%; border: 1px solid;" id="map2"></div>
<div style="width:20%; height:20%; border: 1px solid;" id="map3"></div>

JavaScript

var maps = [];
for (var i = 0; i < 4; i++) {
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    controls: ol.control.defaults(),
    target: 'map' + String(i),
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });
  maps.push(map);
}

for (var j = 0, jj = maps.length; j < jj; j++) {
   var elem = maps[i];
    elem.on('singleclick',function(evt){
        elem.getView().setCenter(evt.coordinate);
    });   
}