Leafletで地図上にマーカーを表示させて、吹き出しに説明を出す

緯度経度を指定してその点を中心として地図を表示させ、別の点を緯度経度で指定してマーカーを表示させ、吹き出しまで出します。bindPopup()では初期状態で開かないので、openPopup()を呼び出して初めから表示させるようにしています。

今回は地図の中心を新大久保駅(35.701306, 139.700044)、マーカーは新宿駅(35.690921, 139.700258)に表示してます。

<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>
<div id="map" style="width: ***px; height: ***px;"></div>
<script type="text/javascript">
window.onload() = function() {
  // 地図オブジェクト
  var myMap = L.map("map", {
    // ズームレベル
    zoom: 13, //
    // 中心点緯度経度
    center: [35.701306, 139.700044],
    // 地図上をクリックされたときにPopupを閉じない設定
    closePopupOnClick: false
  });

  // タイルレイヤにはオープンストリートマップを拝借
  var osm = L.tileLayer("https://tile.openstreetmap.jp/{z}/{x}/{y}.png", {
    attribution: "<a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
  });
  osm.addTo(myMap);

  // マーカー
  var myMarker = L.marker([35.690921, 139.700258]);
  myMarker.addTo(myMap);

  // 吹き出し
  var myPopup = L.popup();

  // 吹き出しに表示する文
  myPopup.setContent("新宿駅で~す");

  // マーカーと吹き出しの関連付け
  myMarker.bindPopup(myPopup);

  // 吹き出しを開く
  myMarker.openPopup();

}
</script>