<script>
  // ... existing map code
  // ...
  // ... your markers code goes here
document.addEventListener("DOMContentLoaded", function(event){
  var container = document.getElementById("wpts");
  if (typeof(container) != 'undefined' && container != null){
    var wpts   = document.getElementById("wpts").children;
    var string = null;
    var title  = null;
    var latlng = null;
    if (typeof(wpts) != 'undefined' && wpts != null){
      for(i=0; i < wpts.length; i++){
        if( typeof wpts[i].innerHTML === "string" && wpts[i].innerHTML.length > 0 ){
          string = wpts[i].innerHTML;
          latlng = string.split(",");
          if( parseFloat(latlng[0]) && parseFloat(latlng[1]) ){
            //(waypoint)marker
            var circle = L.circleMarker([latlng[0],latlng[1]], {
              color: '#FF4500',
              fillColor: '#FF4500',
              fillOpacity: 0.75,
              radius: 6,
              stroke: false
            }).addTo(map);
            //popup
            if( typeof wpts[i].title === "string" && wpts[i].title.length > 0 ){
              circle.bindPopup(wpts[i].title);
            }
          }
          else{
            break;
          }
        }
      }
    }
  }
});
</script>