OpenLayers

Marker appears in different position when zooming

When the marker icon is moving through the map while zooming, it is caused by a bad anchor with respect to the dimensions/shape of the image of the marker.

So you have to define a proper anchor in your ol.style.Icon object, by playing with the anchor property, or better, by understanding how it works. For instance, for a "map pointer marker" like in the OL example, you have to set the following:

      anchor: [0.5, img_height],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',

where img_height is the height in pixels of your image. The rationale is to set the X anchor in the middle (0.5, with unit as fraction); and for Y positioning, we take the height of the image since it should be anchored at the "arrow" of the pointer, which is a the bottom.

For a simple circle that should be exactly anchored at the center of the image, the parameters should be:

      anchor: [0.5, 0.5],
      anchorXUnits: 'fraction',
      anchorYUnits: 'fraction',

which are actually the default values ;-).

The relevant API doc is here.