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 :)