Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Google Map</title>
    <style>
        #map {
            height: 690px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAn1m17AAhjM7pKbqe3lFNyqwZpuqMLUh4&callback=initMap&v=weekly"
        async></script>

    <script async
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAn1m17AAhjM7pKbqe3lFNyqwZpuqMLUh4&libraries=drawing&callback=initMap">
        </script>

    <script>
        function initMap() {
            const izmit = { lat: 40.765470, lng: 29.940592 };
            const start = { lat: 40.769890, lng: 29.935914 };
            const end = { lat: 40.761244, lng: 29.943690 };
            var options = {
                zoom: 15,
                center: { lat: 40.765470, lng: 29.940592 },
            }
            const map = new google.maps.Map(document.getElementById("map"), options);
            directionsService = new google.maps.DirectionsService();
            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setMap(map)
            const marker = new google.maps.Marker({
                position: izmit,
                map: map,
                draggable: true,
            });
            const drawingManager = new google.maps.drawing.DrawingManager({
                drawingMode: google.maps.drawing.OverlayType.MARKER,
                drawingControl: true,
                drawingControlOptions: {
                    position: google.maps.ControlPosition.TOP_CENTER,
                    drawingModes: [
                        google.maps.drawing.OverlayType.MARKER,
                    ],
                },

                markerOptions: {
                    draggable: true,
                },
            });
            showRoute(start, end);
            calcDistance(start, end);
            drawingManager.setMap(map);
        }
        /*function calcRoute(start, destination) {
            let request = {
                origin: start,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    //let distance = response.routes[0].legs[0].distance.value;
                    let starter = new google.maps.Marker({
                        position: start,
                        map: map
                    })
                    let marker = new google.maps.Marker({
                        position: destination,
                        map: map
                    })
                }

            })
        }*/
        function showRoute(start, destination) {
            let request = {
                origin: start,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    let starter = new google.maps.Marker({
                        position: start,
                        map: map
                    })
                    let marker = new google.maps.Marker({
                        position: destination,
                        map: map
                    })
                }

            })
        }
        function calcDistance(start, destination) {
            let request = {
                origin: start,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    let distance = response.routes[0].legs[0].distance.value;
                    console.log(distance);
                }

            })
        }
    </script>

</body>

</html>
Editor is loading...