Error when creating overlay markers

I want to create an animated marker from an SVG icon. According to the recommendations in openLayers, this should be done through an overlay element. In OpenLayers it works correctly, but with olcs it fails to create the marker:

var marker = new ol.Overlay({
	position: [-8253399.592624033, 520451.1540516437],
	positioning: 'center-center',
	element: document.getElementById('marker'),
	stopEvent: false
});

ol2d.addOverlay(marker);

showing the following error:

SynchronizedOverlay.js:163 Uncaught TypeError: Cannot read property 'getMap' of undefined
    at r.o.handlePositionChanged (SynchronizedOverlay.js:163)
    at r.e (events.js:41)
    at r.e.dispatchEvent (Target.js:101)
    at r.e.notify (Object.js:151)
    at r.e.set (Object.js:170)
    at r.e.setPosition (Overlay.js:391)
    at r.e [as constructor] (Overlay.js:208)
    at new r (SynchronizedOverlay.js:16)
    at e.t.addOverlay (OverlaySynchronizer.js:116)
    at e.t.addOverlayFromEvent_ (OverlaySynchronizer.js:98)

I provide a test with the latest versions of OLCS. https://olcs.netlify.com/

Thanks.

Hmm, there seems to be a bug in the synchronized SynchronizedOverlay. setPosition should only be called after the initial setup is done.

you could circumvent the problem by only setting the position after creating of the overlay like this:

var marker = new ol.Overlay({			
			positioning: 'center-center',
			element: document.getElementById('marker'),
			stopEvent: false
		});	
		ol2d.addOverlay(marker);
                marker.setPosition([-8253399.592624033, 520451.1540516437]);

Thank you @jbo023 for the explanation, it works correctly with the instructions.

no problem, but you should leave the issue open, this is a valid bug, its just easy to circumvent :)