benim işyerinden dünyanın merkezi çorum 680 KM miş
alert olarak uyarı verdirdim
gerekli değişikleri yaparsın hocam.
kodu şuradan aldım : https://developers.google.com/maps/d...s-travel-modes
benim tek yaptığım alert verip km cinsinden hesaplama yaptırmak oldu bilgin olsun.
daha büyük projelerde yer almıştım google map ile ilgili.
bir sorun olursa yazman yeterli.
<html>
<head>
<title>Travel Modes in Directions</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<b>Mode of Travel: </b>
<select id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
</div>
<div id="distance-panel">Mesafe: <span id="distance"></span></div>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=[APIkey]&callback=initMap&v=weekly"
defer
></script>
<script>
function initMap() {
const directionsRenderer = new google.maps.DirectionsRenderer();
const directionsService = new google.maps.DirectionsService();
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: { lat: 37.77, lng: -122.447 },
});
directionsRenderer.setMap(map);
calculateAndDisplayRoute(directionsService, directionsRenderer);
document.getElementById("mode").addEventListener("change", () => {
calculateAndDisplayRoute(directionsService, directionsRenderer);
});
}
function calculateAndDisplayRoute(directionsService, directionsRenderer) {
const selectedMode = document.getElementById("mode").value;
directionsService
.route({
origin: { lat: 41.15733506057749, lng: 28.622438170769346 },
destination: { lat:40.54824193205548, lng:34.9595815908121 },
travelMode: google.maps.TravelMode[selectedMode],
})
.then((response) => {
directionsRenderer.setDirections(response);
// Yolun uzunluğunu al
const distance = response.routes[0].legs[0].distance.text;
// Mesafeyi bir uyarı penceresi ile göster
alert("Mesafe: " + distance);
})
.catch((e) => window.alert("Directions request failed due to " + status));
}
window.initMap = initMap;
</script>
</body>
</html> 
