leafletのテスト #JavaScript

leafletdemo4_marker.html
<!DOCTYPE html>
<html>
    <head>
        <title>Leaflet Demo4</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
        <style type="text/css">
        <!--
            #mapid { height: 400px; width: 600px}
        -->
        </style>
    </head>
    <body>
        <div id="mapid"></div>

        <script>
            var mymap = L.map('mapid').setView([35.7102, 139.8132], 15);

            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
            }).addTo(mymap);

            var marker = L.marker([35.7101, 139.8107]).addTo(mymap);
            marker.bindPopup("<p>popup1</p><p>地図表示時に一緒に表示されます。</p>").openPopup();

            var marker2 = L.marker([35.7121, 139.8207]).addTo(mymap);
            var popup = L.popup();
            function onMarker2Click(e) {
                popup
                .setLatLng(e.latlng)
                .setContent("<p>popup2</p><p>clickで表示されます。</p>" + e.latlng.toString())
                .openOn(mymap);
            }
            mymap.on('click', onMarker2Click);

        </script>
    </body>
</html>