Well i am going to explain how to load GMap direction from database in ASP.NET.
Google maps is a web mapping service application and technology provided by Google, powering many map-based services, including the Google maps website, Google ride finder, Google transit, and maps embedded on third-party websites via the Google maps API. ASP.NET is a server-side web application framework designed for web development to produce dynamic web pages.
Let’s check the steps for run this program.

For the first: Go to file > new > project > select asp.net web forms application > entry application name > click ok.

And then add a database: Go to solution explorer > right click on app_data folder > add > new item > select sql server database under data > enter database name > add.


After that create table: Open database > right click on table > add new table > add columns > save > enter table name > ok.

This is the table sample:

Next, create a stored procedure in sql server: Open database > right click on stored procedure > add new stored procedure > write below sql code > save.

Next step, add a webpage: Go to solution explorer > right click on project name form solution explorer > add > new item > select web form/ web form using master page under web > enter page name > add.
Html code



Js code

Write this below js code for load gmap direction from database.

<script src="//maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=abqiaaaaupsjpk3mbtdpj4g8cqbnjrragtyh6uml8madna0ykuwnna8vnxqczvbxtx2dyyxgstoxpwhvig7djw" type="text/javascript"></script><script language="javascript">
        var gmap;

        var directionpanel;
        var direction;
        function initialize() {
            gmap = new gmap2(document.getelementbyid("map"));
            gmap.setcenter(new glatlng(22.573438, 88.36293), 15);
// here i have set kolkata as center and 15 zoom level

            directionpanel = document.getelementbyid("route");
            direction = new gdirections(gmap, directionpanel);
        }
        $(document).ready(function ()
{
            initialize();

            $('#btngetdirection').click(function () {
                //here populate data from database and get to gmap direction
                populatedirection();
            });
        });
        function populatedirection() {
            var from = $('#<%=ddfrom.clientid%>').val();
            var to = $('#<%=ddto.clientid%>').val();

            $.ajax({
                url: "default.aspx/getdirectioin",
// here url for code behind function
                type: "post",
                data: "{from: '"+from+"', to: '"+to+"'}",
                datatype: "json",
                contenttype: "application/json; charset=utf-8",
                success: function (data) {
                    direction.load(data.d.tostring());

                },
                error: function () {
                    alert("error!");
                }
            });
        }
    </script>

And then: write following code in page_load event:
Protected void page_load(object sender, eventargs e)
{
    if (!ispostback)
    {
        populatelocation();
    }}


Here is the function...

Private void populatelocation(){

// populate location here
    datatable dt = new datatable();
    using (sqlconnection con = new sqlconnection(configurationmanager.connectionstrings["con"].connectionstring))
    {
        string query = "select * from locations";
        sqlcommand cmd = new sqlcommand(query, con);
        if (con.state != connectionstate.open)
        {
            con.open(); }
        dt.load(cmd.executereader());}
    ddfrom.datasource = dt;
    ddfrom.datatextfield = "locname";
    ddfrom.datavaluefield = "locid";
    ddfrom.databind();
    ddto.datasource = dt;
    ddto.datatextfield = "locname";
    ddto.datavaluefield = "locid";
    ddto.databind();}


Don’t forget write this function into your page code behind for called from jquery code:

// this is the function is for called from jquery
[webmethod]
Public static string getdirectioin(string from, string to){
    string returnval = "";
    datatable dt = new datatable();
using (sqlconnection con = new sqlconnection(configurationmanager.connectionstrings["con"].connectionstring))
    {
        sqlcommand cmd = new sqlcommand("getdirection", con);
        cmd.commandtype = commandtype.storedprocedure;
        cmd.parameters.addwithvalue("@locfrom", from);
        cmd.parameters.addwithvalue("@locto", to);
        if (con.state != connectionstate.open)
        {
            con.open();}
        dt.load(cmd.executereader());}
    returnval = "from: " + dt.rows[0]["fromloc"].tostring() + " to: " + dt.rows[0]["toloc"].tostring();
    return returnval;}


And the last, Just run your application