Create marker with popup

main.js

var map = new cercaliagl.Map({
  target: 'map'
});
map.whenReady(function () {
  var arrayMarkers = [];
  var markerBcn = new cercaliagl.Marker({
    position: new cercaliagl.LonLat(2.165802217, 41.392919622),
    popup: new cercaliagl.Popup({
      title: 'Barcelona',
      content: 'Barcelona Marker <b>content</b>',
      visible: true,
      offset: [0, -40]
    })
  });
  var markerMadrid = new cercaliagl.Marker({
    position: new cercaliagl.LonLat(-3.715090655, 40.426123994),
    icon: new cercaliagl.Icon({
      src: 'resources/img/cercalia-marker-icon-A.png'
    }),
    popup: new cercaliagl.Popup({
      title: 'Madrid',
      content: '<b>Content</b> of <strong style="color:red">popup</strong>',
      visible: true,
      offset: [0, -25],
      closeOnTime: 5000
    })
  });
  var markerSevilla = new cercaliagl.Marker({
    position: new cercaliagl.LonLat(-6.005183775, 37.38),
    icon: new cercaliagl.Icon({
      src: 'resources/img/cercalia-marker-icon-A.png',
      opacity: 0.5
    }),
    popup: new cercaliagl.Popup({
      title: 'Sevilla',
      content: '<i>Ciudad de Sevilla</i>',
      visible: true,
      offset: [0, -25]
    })
  });
  arrayMarkers.push(markerBcn);
  arrayMarkers.push(markerMadrid);
  arrayMarkers.push(markerSevilla); // Añadimos markers al mapa

  map.addMarkers(arrayMarkers);
  map.centerToMarkers(arrayMarkers, {
    changeZoom: true,
    animation: false
  });
  setTimeout(function () {
    map.closePopups();
  }, 5000);
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Create marker with popup</title>
    <style>
      .map {
        width: 100%;
        height: 640px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    
    <link rel="stylesheet" type="text/css" href="//maps.cercalia.com/gl/v1.0/cercaliagl.css">
    <script src="//maps.cercalia.com/gl/v1.0/cercaliagl.js?key=YOUR_API_KEY"></script>
    <script src="main.js"></script>
  </body>
</html>