Custom map to embbed
HTML
<div id="map"> </div>
Script
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
var map = L.map('map');
// Carto Light Tile Layer
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© Carto'
}).addTo(map);
// Custom Marker Icon
var customIcon = L.icon({
iconUrl: '/user/documents/upload/res/map_pin.png', // Path to your custom marker image
iconSize: [25, 41], // Size of the icon [width, height]
iconAnchor: [12, 41], // Anchor point (where the bottom of the icon is)
popupAnchor: [1, -34] // Position of the popup relative to the icon
});
var locations = [
{ lat: 35.739636, lon: 139.747660, name: "The African Brothers", url: "https://www.instagram.com/theafricanbrothers2016/" },
{ lat: 49.484850, lon: 11.127590, name: "Weinhalle", url: "https://www.weinhalle.de/weine/spirituosen.html" },
{ lat: 53.568685, lon: 9.941623, name: "Tranquillo", url: "https://www.tranquillo.de/produkt-kategorie/wein-und-co/spirituosen/" },
{ lat: 47.496881, lon: 19.067336, name: "Szofi by Nature", url: "https://www.instagram.com/szofibynature/" },
{ lat: 13.778380, lon: 100.546697, name: "No Bar Wine Bar", url: "https://www.instagram.com/nobar.winebar/" },
{ lat: 50.192617, lon: 14.322454, name: "Landcraft HQ", url: "https://www.landcraft.cz/" }
];
var bounds = L.latLngBounds();
locations.forEach(loc => {
var marker = L.marker([loc.lat, loc.lon], { icon: customIcon }).addTo(map)
.bindPopup(`<b>${loc.name}</b><br><a href="${loc.url}" target="_blank">Visit</a>`, {
minWidth: 150,
maxWidth: 250
});
bounds.extend(marker.getLatLng());
});
map.fitBounds(bounds, { padding: [50, 50] });
</script>