I am trying to develop a application using google map .

Description of application :

The user show see the google map on the screen and should be able to click on the map and see the point that is clicked (first click) and when the user click again the route between two location should be drawn ,

so here is my code :

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Show Google Map with Latitude and Longitude in asp.net website</title>

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript">

    var map;
    function initialize() {
        var myLatlng = new google.maps.LatLng(24.18061975930, 79.36565089010);
        var myOptions = {
            zoom: 7,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("gmap"), myOptions);
        // marker refers to a global variable
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map
        });

        google.maps.event.addListener(map, "click", function (event) {
            // get lat/lon of click
            var clickLat = event.latLng.lat();
            var clickLon = event.latLng.lng();

            // show in input box
            document.getElementById("lat").value = clickLat.toFixed(5);
            document.getElementById("lon").value = clickLon.toFixed(5);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(clickLat, clickLon),
                map: map
            });
        });
    }

    window.onload = function () { initialize() };
</script>
     <style>
 div#gmap {
        width: 80%;
        height: 500px;
        border:double;
 }
    </style>
</head>

<body>
    <form id="form1" runat="server">
        Lat: <input type="text" id='lat'>
Lon: <input type="text" id='lon'>
        <center>
            <!-- MAP HOLDER -->
            <div id="gmap"></div>
            <!-- REFERENCES -->

            lat:
            lon:

        </center>

    </form>
</body>

</html>

The user is able to click on the map and can see the point that clicked so but the problem is i don't know how can i merge it with route service .

enter image description here

Related posts

Recent Viewed