Code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="D:\Privat\Entwicklung\windowjs-master\windowjs-master/window.css" />
<script src="D:\Privat\Entwicklung\windowjs-master\windowjs-master/window.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/95e77da10e.js" crossorigin="anonymous"></script>
<script src="D:\xampp\htdocs\supertramp\jquery.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Document</title>
<link rel="stylesheet" href="css_ts.css">
</head>
<body>
<div class="container">
<div class="main_container">
<div class="map_window">
<div id="map">
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div id="modal_your_trip" class="my-modal">
<header class="handle">
<button id="btn_close_your_trip" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="my-modal-title">Modal 3</h4>
</header>
<main>
<div class="modal-body">
<div class="ModalButtons">
</div>
<h2>plan your trip</h2>
<button id="submit">submit</button>
<div id="sortable" class="items ul_list">
</div>
<div id="routesCollection_yours"></div>
</div>
</main>
</div>
</div>
</div>
</body>
<script>
map_window = document.querySelector("map_window")
modal3 = document.getElementById("modal_your_trip")
function CreateDraggableItems3(output){
//list_stops = output
list_stops = ["Praga","Warschau","Berlin","Kiel","Dortmund"]
let div_grandpar_your = document.getElementById("sortable");
div_grandpar_your.innerHTML = '<div id="sortable" class="items ul_list">';
WayPoints = [];
for (let x = 0; x < list_stops.length; x++) {
let div = document.createElement('div');
i_icon_town = document.createElement('i')
i_icon_town.classList.add('fas');
i_icon_town.classList.add('fa-city');
input = document.createElement('input');
if (x == 0){Origin_Beg = list_stops[x]}
if (x == list_stops.length-1){Direction_End = list_stops[x],console.log(list_stops[x])}
if(x> 0){
if(x< list_stops.length-1){
WayPoints.push(list_stops[x])
}
}
placeHolder_input = "-";
input.setAttribute("placeholder", placeHolder_input);
input.setAttribute("size", 1)
i_icon_trash = document.createElement('i')
i_icon_trash.classList.add('fa');
i_icon_trash.classList.add('fa-trash');
span = document.createElement('span');
span.appendChild(i_icon_town);
span.appendChild(input);
span.appendChild(i_icon_trash);
div.appendChild(span)
//div.innerHTML = '<span> <i class="fas fa-city"></i> days: <input type="text"><i class="fa fa-trash"></i></span>';
div.classList.add("icons_your_trip");
div.setAttribute("id", x);
let div_par1 = document.createElement("div")
div_par1.innerText = list_stops[x]
div_par1.classList.add("town_name_your_trip")
div_par1.appendChild(div)
let div_par2 = document.createElement("div");
div_par2.classList.add("ui-state-default")
div_par2.classList.add("available_trip_list")
div_par2.classList.add("linkList")
div_par2.appendChild(div_par1)
div_par2.setAttribute("id", x);
div_grandpar_your.appendChild(div_par2)
//this[this.selectedIndex].text
trashes = document.querySelectorAll(".fa-trash");
id = x;
}
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
calculateAndDisplayRoute2(directionsService, directionsRenderer,Origin_Beg,Direction_End,WayPoints);
}
$(function () {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
$(function () {
$("#sortable").sortable({
stop: (event, ui) => {
moved_id = ui.item.attr('id');
next_id = ui.item.next().attr('id');
links = document.querySelectorAll(".linkList");
if (typeof next_id == "undefined") {
ui.item.attr("id", links.length - 1);
for (let x = 0; x < links.length - 1; x++) {
links[x].id = x;
}
}
else if (next_id == 0) {
for (let x = 0; x < links.length; x++) {
links[x].id = x;
}
}
else {
ui.item.attr("id", next_id - 1);
for (let x = parseInt(moved_id); x < parseInt(next_id) - 1; x++) {
links[x].id = x;
}
}
php_changeListorder(moved_id, next_id);
//beginne Zeichnen
}
});
$("#sortable").disableSelection();
});
function php_changeListorder(moved_id,next_id,name){
//name = document.getElementById('myLists_your_trip').selectedIndex.text;
//getContentFromPHP(moved_id,'changeListOrder.php',null,null,next_id,name);
//getContentFromPHP(moved_id,'changeDayOrder.php',null,null,next_id,name);
}
//getContentFetchAPI('paris',CreateCarousselIMGs)
function initMap() {
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
map = new google.maps.Map( document.getElementById( 'map' ), {
center: {
lat: 51.513329,
lng: -0.088950
},
zoom: 6,
mapTypeId: 'roadmap',
scaleControl: true,
streetViewControl: true,
});
document.getElementById("submit").addEventListener( "click", function() {
CreateDraggableItems3()
})
/*
changePHP_ListOrder().addEventListener("nach Ausführung", function() {
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
calculateAndDisplayRoute2(directionsService, directionsRenderer,Origin_Beg,Direction_End,WayPoints);
}
*/
}
function calculateAndDisplayRoute2(directionsService, directionsRenderer,Origin,Destination,WayPoints) {
const waypts = [];
Origin = "Praga";
Destination = "Dortmund"
WayPoints = ["Warschau","Berlin","Kiel"];
for (let i = 0; i < WayPoints.length; i++) {
waypts.push({
location: WayPoints[i],
stopover: true,
});
}
directionsService
.route({
origin: Origin,
destination: Destination,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING,
})
.then((response) => {
directionsRenderer.setDirections(response);
const route = response.routes[0];
})
.catch((e) => window.alert("Directions request failed due to " + status));
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURCODE&callback=initMap" async defer></script>