Tuesday, April 26, 2011

Implementing BING Maps Ajax control in ASP.net

I implemented BING maps Ajax control 6.3 for our corporate web site, and i would like to share here on my blog.

Basic thing here is i have used ajax control to give good user experience where zoom-In and zoom-Out are very easy with no server post backs.

I implemented Bing maps using Location data  we have in our DB including Latitude and Longittude values, using which i  placed cluster points on Bing Maps.

Below are breif steps, need anything more i can help
To use Bing maps ajax control place the below script tag in ASPpage or if you have master page the place in it.

1.First retreive Data from DB it should have latitude and longitude Data so that we point exact locations on Map.
To user bing maps ajax control place this script tag src in your aspx page html or master page

2.Pass Latitude and longidtude as Arrays to the Javascript function as i did in below, use this code in your code behind file in a method.StringBuilder sb = new StringBuilder("var lats = new Array(); var longs = new Array();var LocNames = new Array(); var Address = new Array();");

sb.AppendLine();for (int i = 0; i < dtArrayLocations.Rows.Count; i++)
if ((dtArrayLocations.Rows[i]["Latitude"] != System.DBNull.Value) && (dtArrayLocations.Rows[i]["Longitude"] != System.DBNull.Value))
sb.AppendFormat("lats[{0}]={1};longs[{0}]={2};LocNames[{0}]='{3}';Address[{0}]='{4}';", i, dtArrayLocations.Rows[i]["Latitude"], dtArrayLocations.Rows[i]["Longitude"], dtArrayLocations.Rows[i]["LOCATION_DESCRIPTOR"].ToString(), dtArrayLocations.Rows[i]["ADDRESS"].ToString().Replace("\n", "") + "," + dtArrayLocations.Rows[i]["CITY"].ToString().Trim() + "," + dtArrayLocations.Rows[i]["STATE_CODE"].ToString().Trim() + "," + dtArrayLocations.Rows[i]["ZIP"].ToString().Trim() + "
" + FormatPhoneNumbers(dtArrayLocations.Rows[i]["PHONE1"].ToString().Trim()) + "
" + dtArrayLocations.Rows[i]["FAX"].ToString());

ScriptManager.RegisterStartupScript(this, this.GetType(), "PointArrays", sb.ToString(), true);
Page.Form.Attributes.Add("onload", "LoadPushPins();");

3. Within Javscript LoadMap using the aobe latitude,longitude values. as below
  myMap = new VEMap('mapDiv');
function LoadPushPins() {
if (lats != null) {
for (var i = 0; i < lats.length; i++) {
var pp = new VEShape(VEShapeType.Pushpin, new VELatLong(lats[i], longs[i]));
myMap.SetCenterAndZoom(new VELatLong(lats[i], longs[i]), 13);
// Create a pin at that location
var desc = "");
function Cluster() {

The idea of sharing this is to give basic idea to implement BING Maps with DB i had tough times in exploring this. If you need any more details leave comment i can get back to you.

Enjoy :)


Jack said...

Hi SudhirR,

Thanks for the post its quite useful but I have a question.

how do i get the long/lats from the database into dtArrayLocations? I am using MySQL as the database but i am unsure of how to load the data into dtArrayLocations.

could you give me a coded example.

SudhirR said...

Hi Jack,

You need to store lat/long in your Applications DB along with the locations.Either you store them manaualy or thru your application or you can contact geonames it has web service which returns lat/long for location. After that its just select statement and put all your locations in Datatable and pass that as mentioned in code.

Let me know if you need more help.


Arun said...

Hi sudhir,

Can you send me the source code for this control implementation.

Rachel said...

Were you able to get other database fields to appear as part of the description in the pushpin popup. I'm struggling with this and wondering if you found a solution.