Create markers with SVG icon.

Copy
<!DOCTYPE html>
<html>
  <head>
    <title>Create markers with SVG icon.</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>
    <script>
      var map;

      function initMap() {
        map = new cercalia.Map({
          target: 'map'
        });


        var svgFillColor = '#ff0000';
        var svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
          '<path fill="' + svgFillColor + '" d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"></path>' +
          '</svg>';

        var marker = new cercalia.Marker({
          position: new cercalia.LonLat(-3.74, 40.49),
          icon: new cercalia.Icon({
            svg: escape(svg),
            size: [24, 24],
            scale: 1,
            anchor: [0.5, 0.5],
            anchorUnits: 'fraction'
          })
        });

        map.addMarker(marker);
      }

      document.addEventListener('cercalia-ready', initMap);
    </script>
  </body>
</html>