leaflet　marker

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.0/leaflet.css"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.0/leaflet.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  </head>
  <body>
    <h1>label</h1>
    <div id="map"></div>
    <script src="script.js"></script>
  </body>
</html>

// Code goes here

var map = L.map('map').setView([38.0748331, 139.4574997], 9);

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



function add_marker() {
    var points = [["P1", 38.077908, 139.542229, "http://jsdo.it/1"], ["P2", 38.075618, 139.642032, "http://jsdo.it/2"], ["P3", 38.0738618, 139.441726, "http://jsdo.it/3"]];
    var marker = [];
    var i;
    for (i = 0; i < points.length; i++) 
    {
            marker[i] = new L.Marker([points[i][1], points[i][2]], {
                title: points[i][0],
                win_url: points[i][3]
            });
            marker[i].addTo(map);
            marker[i].on("click", function() {
                window.open(this.options.win_url);
            });
    };
}
add_marker();

/* Styles go here */

#map {
    width: 450px;
    height: 450px;
}