JS地図ライブラリ・リーフレット ポップアップを地図上に表示させる

const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

var map = L.map('myMap', {
    center: [32.639884, 130.987154],
    zoom: 8,
    layers: [osm]
})

var marker = L.marker([32.87036022808352, 131.02844238281253]).bindPopup(card).openPopup().addTo(map);

function card (e) {
    var img = 'https://images.unsplash.com/photo-1670139018135-6711b8932acf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80';
    var popup = `<div class="popup">
    <img src="${img}">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
    </div>`
    return popup;
}

map.on('click', function (e) {
    L.popup([e.latlng.lat, e.latlng.lng], {content: card}).openOn(map);
});