Sunday, June 6, 2010

Bing Map integration with ASP.Net



Describes a sample application for showing your location using bing map api.
Step 1 .
Create an ASP.Net web site.
Step 2.
Include <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script> in header part of aspx page.
Include these functions for initializing and locating bing map
<script type="text/javascript">
      var map;       
      function LoadMap() {
          map = new VEMap('myMap');
          map.LoadMap();
      }
      function StartGeocoding(address) {
          map.Find(null,    // what
                      address, // where
                      null,    // VEFindType (always VEFindType.Businesses)
                      null,    // VEShapeLayer (base by default)
                      null,    // start index for results (0 by default)
                      1,    // max number of results (default is 10)
                      null,    // show results? (default is true)
                      null,    // create pushpin for what results? (ignored since what is null)
                      null,    // use default disambiguation? (default is true)
                      null,    // set best map view? (default is true)
                      GeocodeCallback);  // call back function
      }
      function GeocodeCallback(shapeLayer, findResults, places, moreResults, errorMsg) {
          // if there are no results, display any error message and return
          if (places == null) {
              //alert((errorMsg == null) ? "There were no results" : errorMsg);
              return;
          }
          var bestPlace = places[0];
          // Add pushpin to the *best* place
          var location = bestPlace.LatLong;
          var newShape = new VEShape(VEShapeType.Pushpin, location);
          //var desc = "Latitude: " + location.Latitude + "<br>Longitude:" + location.Longitude;
          newShape.SetTitle(bestPlace.Name);
          map.AddShape(newShape);
      }
      function locate()
      {
        var obj= document.getElementById('txtAddress');
        if(obj !=null)
        {
        LoadMap();
        StartGeocoding(obj.value);
        }
      }
</script>
Step 3 .
Create a div area for displaying map control.
add a text box for accepting address and a button for invoking locate() JS function included in the page.


Sample application can be downloaded from here

No comments:

Post a Comment