Я пытаюсь заставить карту двигаться внутри него, перетаскивая карту в сторону, чтобы я мог обойти карту.
Но это возможно только onmousedown на map1, при выборе map2 карта не перемещается, ее нельзя перетащить.
При нажатии на map1 button карта появляется и по ней можно перемещаться, но после того, как я нажму на map2 button больше невозможно перемещаться по карте.
Следуйте коду происходящего.
Как это можно исправить?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
</head>
<body>
<div style="margin: 10px">
<button onclick="maps(['New York', 40.6971494, -74.2598757])">Map 1</button>
</div>
<div style="margin: 10px">
<button onclick="maps(['London', 51.528308, -0.3817849])">Map 2</button>
</div>
<div id="mapid" style="width: 200px; height: 200px; margin: 10px"></div>
<script>
function maps(location) {
var container = L.DomUtil.get('mapid');
if(container != null){
container._leaflet_id = null;
}
var map = L.map( 'mapid', {
center: [location[1], location[2]],
minZoom: 2,
zoom: 13
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var m = L.marker([location[1], location[2]]).addTo(map).bindPopup(location[0])
}
</script>
</body>
</html>