<!DOCTYPE html>
<html>





<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }

    </style>
</head>
<body>
<div id="map"></div>
<form action="" method="get">
    <div style="position: absolute;top: 10px;left: 25%;z-index: 5;">

        <input type="text" name="distance" value="" id="distance"><br>

    </div>
</form>
<script>





    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 8,
            center: {lat: 30, lng: 33}
        });

        google.maps.event.addListener(map, 'click', function (event) {


            marker = placeMarker(event.latLng);


        });

        markers = [];
        function placeMarker(location) {

            var marker = new google.maps.Marker({
                position: location,
                map: map

            });
            var lat = marker.getPosition().lat();
            var lng = marker.getPosition().lng();
            //alert("lat="+lat+"lng="+lng)  ;
            var location = lat + "," + lng;
            markers.push(location)


            if(markers.length >= 2)
            {
                var dataString='point1='+markers[0]+"&point2="+markers[1];
                markers = [] ;
                $.post("11.php",dataString, function(data) {
                    $("#distance").val(data);
                });

                return location;
            }


        }

    }


</script>
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCq_JZBDbrE5qma5SgF06M2dVAqbiZBZ-o&libraries=geometry&callback=initMap"
    async defer></script>
</body>
</html>
