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.
222 lines
17 KiB
222 lines
17 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;
|
||
|
|
var rotation = 0;
|
||
|
|
var map;
|
||
|
|
var icon;
|
||
|
|
|
||
|
|
function initMap() {
|
||
|
|
coord_s = {
|
||
|
|
lat: 48.783301,
|
||
|
|
lng: 11.413787
|
||
|
|
};
|
||
|
|
icon = {
|
||
|
|
path: "m 86.244606,487.66203 c -0.09081,5.4e-4 -0.284202,0.0186 -0.389407,0.0564 l -0.210693,0.0902 0.521091,2.1634 -7.513407,0.0165 c -0.146656,3.1e-4 -0.294228,-0.001 -0.442084,-0.002 -0.295695,-0.002 -0.593853,-0.006 -0.89359,-0.0124 -0.439003,-0.01 -0.883054,-0.0248 -1.328105,-0.0433 -0.02383,-0.001 -0.04763,-0.002 -0.07149,-0.004 -0.898886,-0.038 -1.806384,-0.0897 -2.71081,-0.14678 -1.2236,-0.0772 -2.439253,-0.16288 -3.61939,-0.23325 -0.874568,-0.052 -1.729632,-0.0952 -2.550922,-0.12034 -0.564015,-0.0165 -1.111509,-0.0274 -1.640418,-0.0245 -0.259806,0.001 -0.515771,0.006 -0.765667,0.0124 -0.249873,0.009 -0.504472,0.0215 -0.761877,0.0395 -0.128715,0.009 -0.257518,0.0186 -0.387523,0.0301 -0.389419,0.0342 -0.785294,0.0795 -1.179535,0.13171 -5.85e-4,6e-5 -0.0013,-6e-5 -0.0018,0 -0.263221,0.0349 -0.524844,0.0737 -0.786317,0.11476 -0.261496,0.0409 -0.522128,0.0843 -0.778791,0.12985 -0.256068,0.0457 -0.509907,0.0944 -0.758144,0.14306 -5.87e-4,1.2e-4 -0.0013,-1.1e-4 -0.0018,0 -0.1244,0.0244 -0.24499,0.0486 -0.366833,0.0735 -0.364888,0.0747 -0.718413,0.15152 -1.053478,0.22761 -5.86e-4,1.3e-4 -0.0013,-1.2e-4 -0.0018,0 -0.22373,0.0508 -0.438682,0.1008 -0.645271,0.1505 -0.413192,0.0993 -0.789506,0.19468 -1.115543,0.28031 -0.489031,0.1284 -0.865778,0.23639 -1.089237,0.30098 -0.148906,0.0431 -0.229509,0.0678 -0.229509,0.0678 l -0.82394,0.22575 c -0.05432,0.0145 -0.107045,0.0417 -0.15803,0.0791 -0.01734,0.0124 -0.03386,0.0262 -0.05078,0.0413 -0.06618,0.059 -0.12948,0.13667 -0.190009,0.23141 -2.76e-4,4.1e-4 2.77e-4,10e-4 0,0.002 -0.03012,0.0472 -0.06155,0.0987 -0.0903,0.15421 -2.52e-4,4.7e-4 2.54e-4,0.001 0,0.002 -0.02876,0.0555 -0.05724,0.11524 -0.08464,0.17877 -2.22e-4,5.4e-4 2.24e-4,0.001 0,0.002 -0.220748,0.51226 -0.398514,1.27206 -0.538021,2.18033 -9e-5,5.4e-4 9.1e-5,10e-4 0,0.002 -0.0023,0.0145 -0.0035,0.0292 -0.0056,0.0431 -0.03037,0.20046 -0.05972,0.40925 -0.08653,0.62271 -0.0018,0.0145 -0.0039,0.0285 -0.0056,0.0431 -0.0302,0.2434 -0.057,0.49379 -0.08278,0.75062 -5.9e-5,5.3e-4 6.1e-5,10e-4 0,0.002 -0.0128,0.1282 -0.02583,0.25855 -0.03763,0.38943 -5.3e-5,5.3e-4 5.6e-5,10e-4 0,0.002 -0.01178,0.13088 -0.02312,0.26181 -0.03385,0.39506 -5e-5,5.2e-4 4.9e-5,10e-4 0,0.002 -0.02153,0.26713 -0.04082,0.53852 -0.05833,0.81268 -4e-5,5.3e-4 4.2e-5,0.001 0,0.002 -0.05252,0.82376 -0.08786,1.67288 -0.107226,2.50198 -1.5e-5,5.4e-4 1.4e-5,0.001 0,0.002 -0.01301,0.5532 -0.01879,1.0964 -0.01879,1.61977 0,0.0582 0.0017,0.11803 0.0018,0.17692 -2.23e-4,0.0587 -0.0018,0.11852 -0.0018,0.17691 0,0.52333 0.0059,1.06654 0.01879,1.61971 1.7e-5,5.5e-4 -1.5e-5,0.001 0,0.002 0.01941,0.82919 0.05471,1.67824 0.107226,2.502 3.9e-5,5.1e-4 -4e-5,10e-4 0,0.002 0.01755,0.27415 0.03678,0.54553 0.05833,0.81268 4.9e-5,5.3e-4 -5e-5,10e-4 0,0.002 0.01069,0.13315 0.02206,0.26415 0.03385,0.39504 5.6e-5,5.3e-4 -5.5e-5,10e-4 0,0.002 0.01178,0.13089 0.02477,0.26127 0.03761,0.38941 6.2e-5,5.5e-4 -6e-5,10e-4 0,0.002 0.02578,0.25683 0.05258,0.50723 0.08278,0.75062 0.0018,0.0144 0.0038,0.0287 0.0056,0.0431 0.02681,0.21343 0.05615,0.42213 0.08653,0.62271 0.0021,0.0145 0.0035,0.0291 0.0056,0.0431 9.1e-5,5.4e-4 -9e-5,10e-4 0,0.002 0.139513,0.90821 0.317272,1.66807 0.538021,2.18035 2.23e-4,5.3e-4 -2.22e-4,0.001 0,0.002 0.0274,0.0636 0.05591,0.12304 0.08464,0.17877 2.54e-4,4.9e-4 -2.53e-4,0.001 0,0.002 0.02876,0.0555 0.06017,0.10699 0.0903,0.15421 2.77e-4,4.3e-4 -2.76e-4,10e-4 0,0.002 0.06051,0.0947 0.123802,0.17238 0.190008,0.23139 0.01693,0.0145 0.03347,0.0287 0.05078,0.0413 0.05099,0.0374 0.103693,0.064 0.15803,0.0791 l 0.82394,0.22574 c 0,0 0.0806,0.0245 0.229509,0.0678 0.223404,0.0646 0.600182,0.17259 1.089237,0.30099 0.326019,0.0857 0.702339,0.18105 1.115544,0.28031 0.206565,0.0495 0.421522,0.0997 0.64527,0.15049 6.4e-4,10e-5 0.0013,-1.2e-4 0.0018,0 0.335071,0.0761 0.688552,0.15277 1.053478,0.22762 0.12184,0.025 0.242439,0.0489 0.366833,0.0732 5.87e-4,1.3e-4 0.0013,-1.3e-4 0.0018,0 0.248212,0.0487 0.50205,0.0974 0.758141,0.14285 0.256689,0.0457 0.51732,0.0888 0.778793,0.12986 0.261498,0.0411 0.523115,0.0799 0.786317,0.11476 6.4e-4,4e-5 0.0013,-9e-5 0.0018,0 0
|
||
|
|
fillColor: '#800000',
|
||
|
|
fillOpacity: 0.8,
|
||
|
|
strokeWeight: 0.84278,
|
||
|
|
//origin: new google.maps.Point(0, 0),
|
||
|
|
anchor: new google.maps.Point(75, 502),
|
||
|
|
scale: .75,
|
||
|
|
rotation: (rotation - 90)
|
||
|
|
}
|
||
|
|
|
||
|
|
diff = 0
|
||
|
|
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: [marker_s.getPosition(), marker_d.getPosition()],
|
||
|
|
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: [marker_s.getPosition(), marker_d.getPosition()],
|
||
|
|
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,
|
||
|
|
map: map,
|
||
|
|
draggable: true,
|
||
|
|
icon: icon
|
||
|
|
});
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateHeading() {
|
||
|
|
icon.rotation = (rotation - 90);
|
||
|
|
marker_s.setMap(null);
|
||
|
|
|
||
|
|
marker_s = new google.maps.Marker({
|
||
|
|
position: marker_s.getPosition(),
|
||
|
|
map: map,
|
||
|
|
draggable: true,
|
||
|
|
icon: icon,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyClu2yvJQjVAQIqs1v6eSEXSgwUNVeDLZM&callback=initMap" async defer></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|