Leafletで表示しているマーカーの画像を変更させるサンプルプログラム。下の例では、クリックするたびに○と×が交互に表示されます。画像を表示させるだけの場合は、好きな画像をマーカーとして表示させるのページを。
var myMap = L.map("map", { zoom: 13, center: [35.710139, 139.810833], }); // タイルレイヤにはオープンストリートマップを拝借 var osm = L.tileLayer("https://tile.openstreetmap.jp/{z}/{x}/{y}.png", { attribution: "<a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors" }); osm.addTo(myMap); // ○の画像 var icon_o = L.icon({ iconUrl: "o.png", iconAnchor: [15, 15] }); // ×の画像 var icon_x = L.icon({ iconUrl: "x.png", iconAnchor: [15, 15] }); // マーカー var myMarker = L.marker( [35.710139, 139.810833], { icon: icon_o } ); myMarker.addTo(myMap); // マーカーにクリックイベントをbind myMarker.on('click', function(){ if (myMarker.getIcon() === icon_o) { // ○なら×を myMarker.setIcon(icon_x); } else if (myMarker.getIcon() === icon_x) { // ×なら○を myMarker.setIcon(icon_o); } else { // え? alert('Oh, my God!'); } });