<div id="map"></div>

 
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0px;
      margin: 0px;
    }
 
    #map {
      width: 100%;
      height: 100%;
    }
    //. 掛川城の緯度経度(初期位置)
    var lat = 34.77530283508074;
    var lng = 138.01500141620636;
 
    var map = null;
    var marker = null;
 
    $(function() {
      //. 掛川城を中心とした地図を OpenStreetMap データで表示
      map = L.map('map').setView([lat, lng], 15);
      L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: 'Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a>',
          maxZoom: 18
        }
      ).addTo(map);
 
      //. 初期状態で掛川城にマーカーを設置
      var mapMarker = L.marker([34.77530283508074, 138.01500141620636]).addTo(map);
      var comment = 'sample <br> 掛川城';
      mapMarker.bindPopup(comment);
 
    });

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js
  2. https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js