Leaflet marker moving while zoom in/out

Question

I am facing an issue with Leaflet. I have a bunch of markers that I have located on a map (in my case it represents golf courses). However, when I zoom in / out, the markers are moving on the map.

After browsing the web, the solution appears to be the iconAnchor attribute. In my case, the problem remains the same (I have tried lots of iconAnchor combination) and I do not see where the issue can come from.

Can anyone help ?

Thank you

(Below my code so far. I am working in Ruby on Rails framework for info)

let customIcon = new L.Icon({
    iconUrl: '<%= image_path("map_marker.png") %>',
    iconSize:     [26, 36]
    iconAnchor:   [13, 18]
    popupAnchor:  [0, -28]
});

for(let i = 0; i < gon.golfs.length; i++){
    let marker = L.marker([gon.golfs[i].lat, gon.golfs[i].long], {icon: 
    customIcon}).addTo(mymap);
    marker.bindPopup(gon.golfs[i].name.link("golfs/"+gon.golfs[i].id));
};

Answer 1

Your iconAnchor should be [13, 36] First being half of the iconSize first parameter and second full size. Alos make sure to check that you are not changing the size of your icon somewhere in the code

Answer 2

When the marker changes while zooming in/out, this shows your marker hasn't sized, and you should set marker size with the code below.

import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
let DefaultIcon = L.icon({
  iconUrl: icon,
  shadowUrl: iconShadow,
  iconSize: [24, 36],
  iconAnchor: [12, 36],
});