let zoom = 18; let lat = 52.2297700; let lon = 21.0117800; let featureGroups = [ L.marker([52.22966244690615, 21.011084318161014], { title: 'A' }).bindPopup('A'), L.marker([52.22998444382795, 21.012511253356937], { title: 'B' }).bindPopup('B'), L.marker([52.22870029595543, 21.00647628307342], { title: 'C' }).bindPopup('C') ]; let map = L.map('map', { minZoom: 0, maxZoom: 18 }).setView([lat, lon], zoom); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); for (let i = 0; i < featureGroups.length; i++) { featureGroups[i].addTo(map); } function markerOpen(id) { for (let i in featureGroups) { const markerId = featureGroups[i].options.title; if (markerId === id) { featureGroups[i].openPopup(); centerMarker(featureGroups[i].getLatLng()); } } } function centerMarker(latlng) { console.log(latlng); const marker = L.marker([latlng.lat, latlng.lng]); let group = new L.featureGroup([marker]); map.fitBounds(group.getBounds()); } const markersDiv = document.querySelectorAll('.marker-click'); markersDiv.forEach(marker => { marker.addEventListener('click', () => { markerOpen(marker.id); }); });
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script> <div id="map"></div> <a id="A" class="marker-click" href="#">Marker A</a><br> <a id="B" class="marker-click" href="#">Marker B</a><br> <a id="C" class="marker-click" href="#">Marker C</a>
html, body { height: 100%; margin: 0; } #map { width: 100%; height: 90%; }