You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
179 lines
4.1 KiB
179 lines
4.1 KiB
2 years ago
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Google Map</title>
|
||
|
|
<meta name="viewport" content="initial-scale=1.0">
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
#map {
|
||
|
|
height: 98%;
|
||
|
|
width: 98%;
|
||
|
|
margin: 0px;
|
||
|
|
padding: 0px
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div style="padding:10px">
|
||
|
|
<div id="map"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
//const latLng = { lat: 48.783301, lng: 11.413787 };
|
||
|
|
//console.log("Delete all Markers");
|
||
|
|
|
||
|
|
// In the following example, markers appear when the user clicks on the map.
|
||
|
|
// Each marker is labeled with a single alphabetical character.
|
||
|
|
var marker_s;
|
||
|
|
var marker_d;
|
||
|
|
var coord_s;
|
||
|
|
var coord_d;
|
||
|
|
var diff;
|
||
|
|
var line;
|
||
|
|
|
||
|
|
function initMap() {
|
||
|
|
coord_s = { lat: 48.783301, lng: 11.413787 };
|
||
|
|
diff = 0
|
||
|
|
const map = new google.maps.Map(document.getElementById("map"), {
|
||
|
|
zoom: 12,
|
||
|
|
center: coord_s,
|
||
|
|
});
|
||
|
|
// This event listener calls addMarker() when the map is clicked.
|
||
|
|
google.maps.event.addListener(map, "click", (event) => {
|
||
|
|
addMarker(event.latLng, map);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Add a marker at the center of the map.
|
||
|
|
addMarker(coord_s, map);
|
||
|
|
// Add traffic layer
|
||
|
|
const trafficLayer = new google.maps.TrafficLayer();
|
||
|
|
trafficLayer.setMap(map);
|
||
|
|
|
||
|
|
// This event listener calls when the Markers are moved
|
||
|
|
google.maps.event.addListener(marker_s, 'dragend', function(event) {
|
||
|
|
if (diff == 2) {
|
||
|
|
coord_s = marker_s.getPosition();
|
||
|
|
line.setMap(null);
|
||
|
|
|
||
|
|
line = new google.maps.Polyline({
|
||
|
|
path: [coord_s, coord_d],
|
||
|
|
geodesic: true,
|
||
|
|
strokeColor: '#FF0000',
|
||
|
|
strokeOpacity: 1.0,
|
||
|
|
strokeWeight: 2
|
||
|
|
});
|
||
|
|
line.setMap(map); }
|
||
|
|
else {
|
||
|
|
coord_s = marker_s.getPosition();
|
||
|
|
}
|
||
|
|
returnS();
|
||
|
|
|
||
|
|
//console.log("S Position moved" + coord_s)
|
||
|
|
//console.log("diff = "+ diff)
|
||
|
|
});
|
||
|
|
|
||
|
|
google.maps.event.addListener(marker_d, 'dragend', function(event) {
|
||
|
|
coord_d = marker_d.getPosition();
|
||
|
|
returnD();
|
||
|
|
line.setMap(null);
|
||
|
|
|
||
|
|
line = new google.maps.Polyline({
|
||
|
|
path: [coord_s, coord_d],
|
||
|
|
geodesic: true,
|
||
|
|
strokeColor: '#FF0000',
|
||
|
|
strokeOpacity: 1.0,
|
||
|
|
strokeWeight: 2
|
||
|
|
});
|
||
|
|
line.setMap(map);
|
||
|
|
|
||
|
|
//console.log("D Position moved" + coord_d)
|
||
|
|
//console.log("diff = "+ diff)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Adds a marker to the map.
|
||
|
|
function addMarker(location, map) {
|
||
|
|
// Add the marker at the clicked location, and add the next-available label
|
||
|
|
// from the array of alphabetical characters.
|
||
|
|
if (diff == 0) { // Add start
|
||
|
|
marker_s = new google.maps.Marker({
|
||
|
|
position: location,
|
||
|
|
label: "ccp",
|
||
|
|
map: map,
|
||
|
|
draggable: true,
|
||
|
|
});
|
||
|
|
coord_s = location;
|
||
|
|
returnS();
|
||
|
|
|
||
|
|
marker_d = new google.maps.Marker({
|
||
|
|
position: location,
|
||
|
|
label: "D",
|
||
|
|
map: map,
|
||
|
|
draggable: true,
|
||
|
|
});
|
||
|
|
marker_d.setMap(null);
|
||
|
|
|
||
|
|
diff = 1;
|
||
|
|
|
||
|
|
//console.log("Init: S New Position " + coord_s)
|
||
|
|
//console.log("diff = "+ diff)
|
||
|
|
}
|
||
|
|
else if (diff == 1) { // Add destination
|
||
|
|
coord_d = location;
|
||
|
|
returnD();
|
||
|
|
|
||
|
|
marker_d.setPosition(location);
|
||
|
|
marker_d.setMap(map);
|
||
|
|
|
||
|
|
line = new google.maps.Polyline({
|
||
|
|
path: [coord_s, coord_d],
|
||
|
|
geodesic: true,
|
||
|
|
strokeColor: '#FF0000',
|
||
|
|
strokeOpacity: 1.0,
|
||
|
|
strokeWeight: 2
|
||
|
|
});
|
||
|
|
line.setMap(map);
|
||
|
|
|
||
|
|
diff = 2;
|
||
|
|
|
||
|
|
//console.log("D New Position " + coord_d)
|
||
|
|
//console.log("diff = "+ diff)
|
||
|
|
} else { // Add new start
|
||
|
|
coord_s = location;
|
||
|
|
returnS();
|
||
|
|
coord_d = null;
|
||
|
|
returnD();
|
||
|
|
|
||
|
|
marker_d.setMap(null);
|
||
|
|
line.setMap(null);
|
||
|
|
|
||
|
|
marker_s.setPosition(location);
|
||
|
|
|
||
|
|
diff = 1;
|
||
|
|
|
||
|
|
//console.log("S New Position " + coord_s)
|
||
|
|
//console.log("diff = "+ diff)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function returnS() {
|
||
|
|
try {
|
||
|
|
var out = { lat: coord_s.lat(), lng: coord_s.lng() };
|
||
|
|
} catch {
|
||
|
|
var out = { lat: coord_s.lat, lng: coord_s.lng };
|
||
|
|
}
|
||
|
|
return out;
|
||
|
|
}
|
||
|
|
function returnD() {
|
||
|
|
try {
|
||
|
|
var out = { lat: coord_d.lat(), lng: coord_d.lng() };
|
||
|
|
} catch {
|
||
|
|
var out = { lat: null, lng: null };
|
||
|
|
}
|
||
|
|
return out;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyClu2yvJQjVAQIqs1v6eSEXSgwUNVeDLZM&callback=initMap"
|
||
|
|
async defer></script>
|
||
|
|
</body>
|
||
|
|
</html>
|