title: With two different js both generating an openlayers map each does not replace the other in the same div
body: <p>Having a simple div with id='map'</p>
  <p>
  and an JS:
  </p>
  <pre><code>var MapPlayOL = {
      myinfo: &quot;MapObjectOL&quot;,
  
      simpleMap : function() {
          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([12.82, 50.41]),
            zoom: 7
          })
          });
      },
  
      mainMap : function() {
          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
          })
              });
      },
  
      clearMap : function() {
          $( &quot;#map&quot; ).html(&quot;&quot;);
      }
  </code></pre>
  <p>Executing MapPlayOL.simpleMap() fills the map. Afterwards executing MapPlayOL.mainMap() does not replace the content of the div: no new map appears.
  Same happens vice versa. Only executing MapPlayOL.clearMap() inbetween allows the second call to  replace the content of the div.</p>
  <p>Why?</p>