複数のマーカーそれぞれに吹き出しをつける

複数のgoogle.maps.Markerに吹き出しをつけるのは難しかったんですが、Leaflet版だとYahoo! JavaScriptマップAPIと同じような感じでした。

<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 data = new Array();
  data.push({position: [35.697745, 139.826395], content: '亀戸'});
  data.push({position: [35.700295, 139.833692], content: '亀戸水神'});
  data.push({position: [35.707055, 139.831897], content: '東あずま'});
  data.push({position: [35.710127, 139.828033], content: '小村井'});
  data.push({position: [35.717753, 139.816786], content: '曳舟'});

  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);

  for (i = 0; i < data.length; i++) {
    var myPopup = L.popup({
      // 他のPopupが開いたときに閉じない設定
      autoClose: false 
    });
    myPopup.setContent(data[i].content);

    var myMarker = L.marker(data[i].position);
    myMarker.bindPopup(myPopup);
    myMarker.addTo(myMap);
  }
}
</script>