JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
    <div id="map"></div>
</body>

CSS

#map{
    position:absolute; 
    top:5px; 
    left:5px; 
    bottom:5px; 
    right:5px;
    border:1px solid black;
}

JavaScript

var map;


map = new OpenLayers.Map({
    div: "map",
    projection: new OpenLayers.Projection("EPSG:900913")
});

var osm = new OpenLayers.Layer.OSM();
var gmap = new OpenLayers.Layer.Google("Google Streets");
var graphic = new OpenLayers.Layer.Image('City Lights', 'http://mapping.referata.com/w/images/4_m_citylights_lg.gif', new OpenLayers.Bounds(8.098224, 45.772682, 17.74378, 49.478924).transform(
new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), new OpenLayers.Size(580, 288), {
    isBaseLayer: false,
    opacity: 0.5
});

map.addLayers([osm, gmap, graphic]);

map.addControl(new OpenLayers.Control.LayerSwitcher());

map.setCenter(
new OpenLayers.LonLat(13.2, 46.9).transform(
new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 7);