Leaflet 1系を使用してマーカのポップアップを外部からオープンします。

注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」

地図下部のリンクをクリックするとポップアップが開きます。

【東京都】 【千葉県】 【埼玉県】

<div id="mapid" style="width: 100%; height: 400px;"></div>
 
 
<!-- 外部からポップアップを開くためのリンク -->
<p>
<a href="#mapid" onclick="popupOn(0);">【東京都】</a>
<a href="#mapid" onclick="popupOn(1);">【千葉県】</a>
<a href="#mapid" onclick="popupOn(2);">【埼玉県】</a>
</p>
 
 
<script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.js"></script> 
<script>
  function cssLoad(cssFile){
    if(document.all){
      document.createStyleSheet(cssFile);
    }else{
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      link.type = "text/css"
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.css");
  function addOnload(evtFunc){
    if(window.addEventListener) {
      window.addEventListener('load', evtFunc, false);
    } else if(window.attachEvent){ //IE用
      window.attachEvent('onload', evtFunc);
    } else {
      //alert('window.onload エラー');
    }
  }
 
 
  //マーカー情報保持
  var markers=[];
 
 
  var mymap;
  addOnload(function(){
    mymap = L.map('mapid');   
    L.tileLayer('https://【タイルサーバーのアドレスとパス】/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="【タイルサーバーの著作権アドレス】" target="_blank">【タイルサーバーの著作者】</a> contributors, '
    }).addTo(mymap);
 
 
    //マーカー情報を配列に保持する
    markers[0]=L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都");
    markers[1]=L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県");
    markers[2]=L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県");
 
 
    mymap.setView([35.6896, 139.6918], 9);
  });
 
 
  //ポップアップを開く関数
  function popupOn(id){
    markers[id].openPopup();
  }
 
 
</script>

基本的な部分はLeaflet マーカーとポップアップ表示と同じです。

マーカー情報をマップ外から使用するためのグローバル変数を用意。

var markers=[];

マーカーの設定を上記で準備したグローバル変数に登録。

markers[0]=L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都");
markers[1]=L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県");
markers[2]=L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県");

マップ外からポップアップを開くためのJavaScript関数。openPopup() でポップアップが開きます。

function popupOn(id){
  markers[id].openPopup();
}

HTMLにポップアップを開くためのリンクを設置。popupOn()の数字はmarkers[]の配列番号と連動しています。

<a href="#mapid" onclick="popupOn(0);">【東京都】</a>
<a href="#mapid" onclick="popupOn(1);">【千葉県】</a>
<a href="#mapid" onclick="popupOn(2);">【埼玉県】</a>

マーカーをセンターに表示したい場合はfunction popupOn()を下記のようにします。（注意：マップが小さくポップアップが画面外にはみ出る場合はpanToとopenPopupの順番が動作に影響します。下記の順番ではポップアップが画面外に出てもマーカーがセンターに来ます。逆にpanTo→openPopupの順にするとポップアップが表示領域にできるだけ収まるように表示されます）

function popupOn(id){
  var latlng=markers[id].getLatLng();
 
  markers[id].openPopup();
  //↑↓順番を変えると動作が少し変わります
  mymap.panTo(latlng);
}