Edit in JSFiddle

var map = Gp.Map.load(
    "map", // html div
    {
         // Geoportal access key obtained here : http://professionnels.ign.fr/ign/contrats
         apiKey: "essentiels",
         // layers to display
         zoom : 6,
         center : {
             x : 2.6,
             y : 47.3, 
             projection : "CRS:84"
         },
         layersOptions : {
             "ORTHOIMAGERY.ORTHOPHOTOS" : {},
             // http://geoservices.brgm.fr/geologie?language=fre&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=TRUE&LAYERS=SCAN_F_GEOL1M&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&STYLES=&BBOX=665307.8941941746%2C5361598.912035404%2C704443.6526761848%2C5400734.670517414
             "geologie-million" : {
                 title : "Carte géologique image de la France au million",
                 description :"BD Scan-Million-Géol est la base de données géoréférencées de la carte géologique image à 1/1 000 000",
                 format : "WMS",
                 version : "1.3.0",
                 url : "https://geoservices.brgm.fr/geologie",
                 layers : ["SCAN_F_GEOL1M"],
                 outputFormat : "image/png",
                 tiled : true,
                 legends : [{
                     url : "http://mapsref.brgm.fr/legendes/geoservices/Geologie1000_legende.jpg",
                     format : "image/jpg"
                 }]
             }
         },
         // additional tools to display on the map
         controlsOptions : {
             "layerSwitcher" : {}
         
         }
    }    
) ;


var infoDiv = document.getElementById("info");
infoDiv.innerHTML = "<p> SDK version " + Gp.sdkVersion + " (" + Gp.sdkDate + ")</p>";

#map {
    padding: 5px;
    width: 100%;
    height: 600px;
    box-shadow: 0 0 10px #999;
}

#info {
    padding: 5px;
    width: 100%;
    height: 20px;
    font-family: "monospace";
    font-size: 10px;
}

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