Using Bing Map API V7

This article is intended to who is new to Bing map API. This article will guide to create a simple Bing map with basic configurations that we will be using most of the time.

First of all if you need to get a Bing Map API key for your development tasks you can do it very simply and for free using the Microsoft Bing Map Portal.
http://www.bingmapsportal.com/

But most of operations and developments can be done even without using a valid Bing Map API key. But the map will have a huge water mark in the center of the map and it will make your map unusable. So its worth for you to get the free API key. Winking smile

The complete source can be found here and the explanations goes under the code sample.

  1.     <style>
  2.         #bingMapPlaceHolder
  3.         {
  4.             width: 600px;
  5.             height: 600px;
  6.             position: relative;
  7.             float: left;
  8.         }
  9.     </style>
  10.     <script type=”text/javascript” src=”/Style Library/Scripts/jquery-1.9.1.js”></script>
  11.     <script type=”text/javascript” src=”https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1″></script>
  12.     <script language=”javascript” type=”text/javascript”>
  13.         var map;
  14.         var bingcredentials = ‘YourBingMapKey’;
  15.         var mapCenterLatitude = ‘6.931944’;
  16.         var mapCenterLongitude = ‘79.847778’;
  17.         var mapZoomLevel = ‘10.8’;
  18.         // Initialize the Map instance
  19.         function InitializeMap() {
  20.             try {
  21.                 Microsoft.Maps.loadModule(‘Microsoft.Maps.Overlays.Style’,
  22.             {
  23.                 callback: function () {
  24.                     map = new Microsoft.Maps.Map(document.getElementById(“bingMapPlaceHolder”),
  25.                     {
  26.                         credentials: bingcredentials,
  27.                         mapTypeId: Microsoft.Maps.MapTypeId.road,
  28.                         enableSearchLogo: false,
  29.                         showCopyright: false,
  30.                         showLogo: false,
  31.                         showDashboard: true,
  32.                         customizeOverlays: true,
  33.                         center: new Microsoft.Maps.Location(eval(mapCenterLatitude), eval(mapCenterLongitude)),
  34.                         zoom: eval(mapZoomLevel)
  35.                     });
  36.                 }
  37.             });
  38.             } catch (e) {
  39.                 alert(e);
  40.             }
  41.         }
  42.         $(document).ready(function () {
  43.             InitializeMap();
  44.         });
  45.     </script>
  46.     <div id=”bingMapPlaceHolder”>
  47.     </div>

We do not need jQuery for this example. But in many scenarios our Bing Map will be hosted as a control inside SharePoint web part, asp.net control, or in a PHP page etc. So to increase the scalability and usability I have used jQuery document ready function to initialize and display the map.

First of all you need to define a placeholder element to display the map. In this example I have defined a div with the ID bingMapPlaceHolder for this purpose. Make sure you set the width and height of this placeholder. I have define some style for this top of the example.

In the script section you can see few variable. map is to hold the Bing map and the rest is supporting variables. As I mentioned earlier Bing map requires a valid API key to function properly and completely as expected. so the bingcredentials variable will hold my Bing map API key.

When we open up the map it will zoom to the entire world. So if we want to zoom and center the map to a specific point (city, state, country, address, geo codes etc.) we need to pass them when we initialize the map. So for that purpose I have few variables that will define the center location latitude, longitude and the default zoom level.

Then I have written a function InitializeMap to define map control and to set the necessary options. Line 29 to 40 does this set up. When initializing the map we will be specifying the html element we going to load the map.

Other options are explained below:

mapTypeId: Microsoft.Maps.MapTypeId.road
Bing map has different views such as Road view, Birds Eye, Areal etc. So this is to specify that I need the Road view.

enableSearchLogo: false
By Default a Bing Search option will be there inside the map it self. So I want to get rid of this.

showCopyright: false
By default there will be a copyright text at the bottom of the map. This option let you show hide it.

showLogo: false
If you don’t wont to show the Bing logo in your map you can set this value to false.

showDashboard: true
Dashboard is the place that will give you the control over map. View selection, Zoom In, Zoom out etc. are specified in the dashboard.

All the options you can apply to the map is documented in msdn can be found here.
http://msdn.microsoft.com/en-us/library/gg427603.aspx

If you inspect line 25 (Microsoft.Maps.loadModule(‘Microsoft.Maps.Overlays.Style’) you can see I have loaded a specific module. There are bunch of different modules provided and catering different needs. For example for traffic, clustering the pin locations, routing and directions etc.

In this example I have loaded the ‘Microsoft.Maps.Overlays.Style’ module because I want Microsoft Bing Map like navigation options in my dashboard. By default it gives a different look and feel. Likewise by loading different modules you can add more functionality and also change the look and feel too.

You can get an idea on default modules and custom modules by referencing these articles.
http://msdn.microsoft.com/en-us/library/hh125837.aspx
http://bingmapsv7modules.codeplex.com/

At at the bottom of the page, I have called the initialize method inside my document ready jQuery function. So this will load all the necessary stuff and will display the map.

If you want try out different simple and advanced options of Bing map you can simple navigate to below link of Bing Map SDK and try them out. This is the best place to see the capabilities of the map API.
http://www.bingmapsportal.com/isdk/ajaxv7

That’s it about loading a simple Bing map. Probably you will need to pin and show locations and search locations etc. Article explaining on those topics are to be followed. Smile

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *