Intro to the Bing Map API Simpler Than it Looks

Wednesday, February 8, 2012

Working with a map on a website, or any other application platform for that matter, may seem like a daunting task, but after working with it for a little bit, it is actually not all that difficult. The documentation for the API is a bit sparse, in my opinion, so I thought I would document what I did to get simple map functionality up and running so that others who might wanting to add a map to a webpage might find this article useful.

I am using the Bing API for this demonstration but you could use Google or Yahoo and not have to do too much different.

Get Your Key

First things first. You will need to go to the Map Account Center and create an account and obtain an application key. You can get development keys and production keys or use one key for both environments. The portal also has your usage stats, SDKs, a blog and other useful information.


Once you have your key, your in business and can start configuring your web page to use the Bing Map API.

The only markup you need for your web page is a div tag.

 1: <div id="map_div" class="map">
 2: </div>

My style for this div looks like this.

 1: #search_main_conent .map 
 2: {
 3:     position: absolute; 
 4:     top: 20; left: 10; 
 5:     width: 400px; 
 6:     height: 400px; 
 7:     border:#555555 2px solid;
 8: }

The JavaScript

What I want to do for this particular map, as far as functionality, is load the map, and when the user clicks on the map and changes the view by moving it around or zooming in or out, is when the views finishes changing, fire an event that will populate two text boxes with the longitude and latitude.

Here is the JavaScript code to make that all work.

 1: $(document).ready(function () {
 2:     twitterMap.LoadMap();
 3: });
 5: function twitterMap() { }
 6: twitterMap._map = null;
 8: twitterMap.LoadMap = function () {
 9:     var $maps = $('#search_main_conent .map');
 10:     $maps.each(function (index) {
 11:         if (index === 0) {
 12:             twitterMap._map = new Microsoft.Maps.Map(
 13:                 this, {
 14:                     credentials: "Your Key",
 15:                     center: new Microsoft.Maps.Location(
 16:                         26.225948, 
 17:                         -80.188093),
 18:                     mapTypeId: Microsoft.Maps.MapTypeId.road,
 19:                     zoom: 7
 20:                 });
 22:             Microsoft.Maps.Events.addHandler(
 23:                 twitterMap._map, 
 24:                 "viewchangeend", 
 25:                 twitterMap.onViewChangeEnd);
 26:         }
 27:     });
 28: };
 30: twitterMap.onViewChangeEnd = function () {
 31:     var location = twitterMap._map.getCenter();
 32:     var longitude = location.longitude;
 33:     var latitude = location.latitude;
 34:     if (longitude) {
 35:         $('#search_main_conent #Longitude').val(longitude);
 36:     }
 37:     if (latitude) {
 38:         $('#search_main_conent #Latitude').val(latitude);
 39:     }
 42: };  
First off, you will notice that I was a good boy and namespaced my JavaScript code. Actually, if you check out the Nerd Dinner project, you will see where I got that inspiration from. They are using an older version of the API, but their JavaScript is very clean and easy to read. Kudos for a job well done.
Now back to this map. So what I am doing here is using a jQuery selector to get a reference to the div tag in the HTML shown above passing that reference into a new Microsoft Maps Map object. Notice, that here is where I pass in my key that I got from the portal.  At this point you can also customize your map so that it displays the way you want it to. In my example, I am setting the location to somewhere near where I live, and I am also setting the map type to show roads and not the satellite.
As I stated, I want to also capture the longitude and latitude when the view changes, so to do that I am defining an event. The event that I want to use is “viewchangedend” which fires when the map view has changed and has completed its changing.
My event handler then calls the map’s getCenter function to get the center coordinates of the center of the map in its current state. That functions returns a location object that contains the longitude and latitude properties that I want to use to fill the corresponding textboxes.
Once its completed my web page looks like this
See, not that difficult.  When I move the map around, the longitude and latitude on the right hand side updates.
Hope that helps.

comments powered by Disqus