
March 11, 2014 06:45 by
Kenny
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&v=2&sensor=false&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

935e069c-3ed5-4557-8962-f10d36c9de3d|0|.0