Google Maps API Introduction in ASP.NET using C#

 A new folder named “Bin” will then be added to your website projects containing the Newtonsoft.Json.Net35.dll references and other important files. You can see this in your Solution Explorer.

C# Code for Google Maps

So far the web application web form does not do anything because it does not have C# code behind that will make the request to the Google Maps server:

1.) In the Solution Explorer, expand Default.aspx and double click “Default.aspx.cs”.
2.) Below is the complete C# script:

Note: Complete working code can be downloaded at the end of this tutorial

The following are the default namespaces in Default.aspx.cs. It is important that you do not delete them:

It is important to add the following required Json.Net namespaces. Before adding them, make sure you have already added the dll reference files to your ASP.NET project. This was already discussed in the previous section.

This is the important file_get_contents function that will retrieve the JSON data from the Google Maps server.

The source code credits come from this URL: http://forums.asp.net/t/1217282.aspx/1

This page_load function will be executed everytime the page is loaded (for example when the user submits input to the server). During this page load event, it retrieves the submitted values from the web form and assignes them to variables.

Now that the input locations are given, you need to formulate the request URL. The request URL should accept two important parameter inputs which are locations that will be used to compute distances. These locations are variables that will be concatenated to the var URL: [code]var requesturl = @"http://maps.googleapis.com/maps/api/directions/json?origin =" + from + "&alternatives=false&units=imperial&destination=" + to + "&sensor=false;" [/code]

For more details about request URL in Google maps, you can read this documentation: http://code.google.com/apis/maps/documentation/webservices/index.html . For more information about the Google Maps Direction API (which is the one that is illustrated in this tutorial), you can read this tutorial: http://code.google.com/apis/maps/documentation/directions/ . Finally, request data to Google Maps API using the file_get_contents function:

You need to parse the JSON data using JObject. More details about JObject class in Json.NET can be found here: http://james.newtonking.com/projects/json/help/html/T_Newtonsoft_Json_Linq_JObject.htm

JObject o = JObject.Parse(content);

Finally, get the distance data by executing a query:

string distance = (string)o.SelectToken("routes[0].legs[0].distance.text");

Why does  the query look like that? Formulating the distance query depends on the structure of the JSON data you are currently working with. You can study its structure by executing a sample request URL in the browser. For example, the request URL below computes the driving distance from New York to New Jersey:
http://maps.googleapis.com/maps/api/directions/json?origin=New%20York&alternatives=false&units=imperial&destination=New%20Jersey&sensor=false

First, lets use the actual maps.google.com to compute the distance for reference purposes:

Image may be NSFW.
Clik here to view.

It shows that the driving distance between New York and New Jersey is around 80.4 miles, based on the suggested route. Now, how does this result relate to the query? Take a look at the raw JSON data when executing the request URL in the browser:

Image may be NSFW.
Clik here to view.

It also shows how routes, legs, distance and text are related in the JSON data structure. Routes[0] means the initial/default index of “routes” then go down to legs[0] until the distance information was obtained.

Finally, once this distance was retrieved from the JSON query, show the results back to the user in the browser:

ResultingDistance.Text = distance;
}
}

Implementing the Project

You can download the complete working project illustrating Google maps application in ASP.NET using C# here: http://www.dotnetdevelopment.net/tutorials/example_google_maps.zip

Try running the project in the browser. Then try inputting major cities that you are interested in finding driving distances. See the sample screenshot below for the result:

Image may be NSFW.
Clik here to view.