外部からLeafletを操作

事例の概要

本事例は、「Leaflet 外部からポップアップを開く」をもとに作成しました。

コード例
<body>
    <div id="map_1" style="height: 400px;"></div>
</body>

<p>
<a href="1234map_1"onmouseover="popupOn1(0);">【東京都】</a>
<a href="3456map_1" onmouseover="popupOn1(1);">【千葉県】</a>
<a href="589map_1" onmouseover="popupOn1(2);">【埼玉県】</a>
</p>

<script>
//背景地図
	var osm = new L.tileLayer
		('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    		maxZoom: 19,
    		attribution: "Map data © <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
		});
	
	var map_1 = L.map('map_1', {
		layers: [osm],	
		center: [35.6896, 139.6918],
		zoom: 9,
    	zoomControl: true
		});

//マーカー情報
  var markers=[];	
	markers[0]=L.marker([35.6896, 139.6918]).addTo(map_1).bindPopup("東京都");
    markers[1]=L.marker([35.6050, 140.1234]).addTo(map_1).bindPopup("千葉県");
    markers[2]=L.marker([35.8572, 139.6490]).addTo(map_1).bindPopup("埼玉県");

//ポップアップを開く関数
  function popupOn1(id){
    markers[id].openPopup();
  }

</script>
上記コードの実行結果