How to display Google map in Asp.net Page along with Direction Service

This code allow us to learn how to integrate the maps and direction service

Description Work Flow:-

While properly running the code it will display the empty Google maps then

Click two times anywhere in the map the first click will considered as the source and the second click will takes as destination from these two points one poly line will appear with shortest direction between two points.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

    CodeBehind="Default.aspx.cs" Inherits="Maps._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=Place the API key here"></script>

    <script type="text/javascript" src="../JavaScript/jquery.1.5.min.js"></script>

   

    <script type="text/javascript">

        var dTable;

        var index = -2;

        var registration = 0;

        var lng = -2;

        var direct = -2;

        var MapCitys = [];

        var MapLables = [];

        var ibLabel;

        var objData = {};

        var geocoder;

        var indexone = 0;

        var GroupName = "All Zones";

        var map;

        var clickCount = 0;

        var click1;

        var directionsDisplay;

        var markers = [];

        var directionsService = new google.maps.DirectionsService();

        function initialize() {

            directionsDisplay = new google.maps.DirectionsRenderer();

            var mapProp = {

                center: new google.maps.LatLng(17.438523, 78.399038),

                zoom: 13,

                mapTypeId: google.maps.MapTypeId.ROADMAP

            };

            map = new google.maps.Map(document.getElementById("map"), mapProp);

            //var mc = new MarkerClusterer(map);

            directionsDisplay.setMap(map);

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

                //debugger;

                clickCount = clickCount + 1;

                if (clickCount == 1)

                    click1 = event.latLng

                //debugger;

                if (clickCount == 2) {

                    calcRoute(click1, event.latLng);

                    clickCount = 0;

                    // map = new google.maps.Map(document.getElementById("map"), mapProp);

                }

            });

        }

        function calcRoute(st, en) {

            var start = st;

            var end = en;

            var request = {

                origin: start,

                destination: end,

                travelMode: google.maps.TravelMode.DRIVING

            };

            directionsService.route(request, function (result, status) {

                if (status == google.maps.DirectionsStatus.OK) {

                    //debugger;

                    directionsDisplay.setDirections(result);

                    for (var index = 0; index < result.routes[0].overview_path.length; index++) {

                        var latlngs = new google.maps.LatLng(result.routes[0].overview_path[index].lat(), result.routes[0].overview_path[index].lng())

                        //debugger;

                        var mark = new google.maps.Marker({

                            position: latlngs,

                            map: map

                        });

                        markers.push(mark);

                    }

                    //debugger;

                    var markerCluster = new MarkerClusterer(map, markers);

                    //debugger;

                }

            });

        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>

    <table width="100%">

        <tr>

            <td>

                <div id="map" style="width: 925px; height: 600px" />

            </td>

        </tr>

    </table>

</asp:Content>

Detailed code Explanation :-

This is the main heart for the maps and the library to integrate the Google map in to the page

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=Place the API key here"></script>

Download this javascript file and add the reference

jquery.1.5.min.js

Main method to initialize the maps

initialize()

This is the method for drawing the direction with parameters of source, destination latitude and Longitude

calcRoute(Source,Destination)