Create 1000 markers button

Create 1000 markers button and center to markers button example.

Example with two button which create 1000 markers every click, and other button when is clicked fit map bounds.

<!DOCTYPE html>
<html>
  <head>
    <title>Create 1000 markers button</title>
    <script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <button id="createmarkers">Create 1000 markers</button>
    <button id="centertomarkers">Center to all markers</button>
    <script>
      document.addEventListener('cercalia-ready', initMap);

      var map;

      function initMap() {

        map = new cercalia.Map({
          target:'map',
          controls: []
        });

        var createmarkers = document.querySelector('#createmarkers');
        var centertomarkers = document.querySelector('#centertomarkers');


        createmarkers.addEventListener('click', function() {
          var arrayMarkers = new Array();

          for (var i = 0; i < 1000; i++) {
            arrayMarkers.push(new cercalia.Marker({
              position: new cercalia.LonLat(-1 - (Math.random() * 6), 41.5 - (Math.random() * 5))
            }));
          }

          map.addMarkers(arrayMarkers);
        }, false);

        centertomarkers.addEventListener('click', function() {
          var markers = map.getMarkers();
          map.centerToMarkers(markers);
        });

      }
    </script>
  </body>
</html>