leaflet maps で地図表示
HTML タグ例 ↓　 地図表示 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Leaflet の基本的な記述</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css">
  <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
  <style>
    #link{ position:absolute; top:8px; left:10px; }
    #mapDiv{position:absolute;top:35px;left:5px;right:5px;bottom:5px;}
  </style>
</head>
<body>
  <header style="text-align:center;">Leaflet の基本的地図</header>
  <div id="link"><a href="../ex-opn.html">leaflet地図</a></div>
  <div id="mapDiv"></div>  
  <script>
    var mapobj = L.map('mapDiv'); // 'mapDiv' に表示する地図を変数 mapobj で指定
    mapobj.setView([35.36063,138.72731],10); //地図中心位置とズームレベルを指定
    //表示するタイルレイヤと Attribution の記述を指定し、地図に追加
    L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', 
      {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"}
    ).addTo(mapobj);
    L.marker([35.36063,138.72731],{title:"富士山"}).addTo(mapobj);// マーカを追加
</script>
</body>
</html>
　　　HTML タグの説明　　参考
  1. HTML5 対応の DOCTYPE を指定
    <!DOCTYPE html>
    　
  2. leaflet css と js をロードする
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
    　
  3. マップの DOM 要素の mapDiv のサイズなどを指定する
    <style> #mapDiv{position:absolute;top:35px;left:5px;right:5px;bottom:5px;} </style>
    　
  4. 地図を表示する要素を id="mapDiv" で確保
    <div id="mapDiv"></div>
    　
  5. "mapDiv" に表示する地図を変数 mapobj で指定
    var mapobj = L.map('mapDiv');
    　
  6. 以下の <script>～</script> で具体的な地図を ～ に記述する
    　
  7. 地図中心位置とズームレベルを指定
    mapobj.setView([35.36063,138.72731],10);
    　
  8. タイルレイヤと Attribution の記述を指定し、地図に追加
    L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {attribution: "地理院タイル"} ).addTo(mapobj);
    　
  9. マーカーを記述
    L.marker([35.36063,138.72731],{title:"富士山"}).addTo(mapobj);