Edit in JSFiddle

function go() {
        
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.GeoportalWMS({
                    layer: "OI.OrthoimageCoverage",
                })
            }),
            new ol.layer.Tile({
                source: new ol.source.GeoportalWMS({
                    layer: "HY.PhysicalWaters"
                })
            }),
            new ol.layer.Tile({
                source: new ol.source.GeoportalWMS({
                    layer: "BU.Building"
                })
            }),
            new ol.layer.Tile({
                source: new ol.source.GeoportalWMS({
                    layer: "TN.RoadTransportNetwork"
                })
            }),
            new ol.layer.Tile({
                source: new ol.source.GeoportalWMS({
                    layer: "GN.GeographicalNames"
                })
            }),
        ],
        view: new ol.View({
            center: [-61.55, 16.25],
            zoom: 12,
            projection : "EPSG:4326"
        })
    });
}

Gp.Services.getConfig({
    apiKey: "full",
    onSuccess: go
});

var infoDiv= document.getElementById("info") ;
infoDiv.innerHTML= "<p> Extension OL version "+Gp.olExtVersion+" ("+Gp.olExtDate+")</p>" ;

<div id="map"></div>
<div id="info"></div>

#map {
    padding: 5px;
    width: 100%;
    height: 300px;
    box-shadow: 0 0 10px #999;
}
#info {
    padding: 5px;
    width: 100%;
    height: 20px;
    font-family : "monospace" ;
    font-size: 10px;
}