How to integrate the Bing Maps with SharePoint 2010?

I have created a custom web part for SharePoint and using the Bing Map powerful API done the integration.

1) Firstly, I have open the visual studio 2010 and selected the “Visual web part” project and named it as a GPS viewer web part.

2) Created a new CBingMaps.js file to call load the Map with several properties :-

CBingMaps.js

1.  
2. function CBingMaps(name)
3. {
4.         this.name = name;
5.         this.map = new VEMap(this.name.toString());
6.         this.dataLayer = new VEShapeLayer();
7.         this.staticMap = false;
8.         CBingMaps.prototype.GetMap = function (Longitutue, Latitute, fixed, location, Zoom, mode, mapStyle) {
9.             //Dispose the map if it was previously loaded.            
10.             if (this.map != null) {
11.                 //this.map.Dispose();
12.             }
13.  
14.             //DashBoard();
15.             var Longitutue = Longitutue;
16.             var Latitute = Latitute;
17.             //VEMap.LoadMap(VELatLong, zoom, style, fixed, mode, showSwitch, tileBuffer, mapOptions);
18.             var fixed = fixed;
19.             var location = location;
20.  
21.             if (Longitutue != 0 && Latitute != 0) {
22.                 var latLong = new VELatLong(Longitutue, Latitute);
23.                 if (latLong != null) {
24.                     if (fixed.toLowerCase() == false) {
25.                         this.map.LoadMap(latLong, Zoom, 'h', false);
26.                     }
27.                     else {
28.  
29.                         this.map.LoadMap(latLong, 4, 'h', true);
30.                         setZoomLevel(Zoom);
31.                     }
32.  
33.                 }
34.             }
35.             else if (location != null) {
36.                 if (this.map != null) {
37.                     this.map.Dispose();
38.                 }
39.                 this.map = new VEMap(this.name.toString());
40.                 this.dataLayer = new VEShapeLayer();
41.                 this.map.LoadMap();
42.                 var veLayerSpec = new VEShapeSourceSpecification(VEDataType.VECollection, location, this.dataLayer);
43.                 this.map.ImportShapeLayerData(veLayerSpec);
44.             }
45.             else {
46.                 this.map.LoadMap();
47.             }
48.  
49.             //map.setCredentials("AipIzr5QKQBNJhb1yF_ex5CFZQSKh1eeUq9OQi3MiF8kTYeER9lUQ5rsZw6xlymU");
50.  
51.             this.ChangeMapStyle(mapStyle);
52.             this.setMapMode(mode);
53.  
54.         }
55.  
56.  
57.         CBingMaps.prototype.DashBoard = function (properties) {
58.             var prop = properties;
59.             //var lDashBoradStaus = '<%= DashBoard.ToString() %>';
60.             if (properties.On == true) {
61.                 this.map.ShowDashboard();
62.             }
63.             else {
64.                 this.map.HideDashboard();
65.             }
66.         }
67.  
68.         CBingMaps.prototype.setZoomLevel = function (properties) {
69.             var zoomlevel = properties;
70.             //var zoomlevel = <%= Zoom %>;
71.             zoomlevel = zoomlevel + 1;
72.             this.map.SetZoomLevel(zoomlevel);
73.         }
74.  
75.         CBingMaps.prototype.setMapMode = function (properties) {
76.             var mode = properties;
77.             if (properties.CommandValueId != null) {
78.                 mode = properties.CommandValueId;
79.             }
80.             if (mode.toString().toUpperCase() == "MODE2D") {
81.                 this.map.SetMapMode(VEMapMode.Mode2D);
82.             }
83.             else if (mode.toString().toUpperCase() == "MODE3D") {
84.                 this.map.SetMapMode(VEMapMode.Mode3D);
85.             }
86.         }
87.  
88.         CBingMaps.prototype.ChangeMapStyle = function (properties) {
89.             var s = properties;
90.             if (properties.CommandValueId != null) {
91.                 s = properties.CommandValueId;
92.             }
93.             if (s == "Road") {
94.                 this.map.SetMapStyle(VEMapStyle.Road);
95.             }
96.             else if (s == "Shaded") {
97.                 this.map.SetMapStyle(VEMapStyle.Shaded);
98.             }
99.             else if (s == "Aerial") {
100.                 this.map.SetMapStyle(VEMapStyle.Aerial);
101.             }
102.             else if (s == "Hybrid") {
103.                 this.map.SetMapStyle(VEMapStyle.Hybrid);
104.             }
105.             else if (s == "Oblique") {
106.                 this.map.SetMapStyle(VEMapStyle.Oblique);
107.             }
108.             else if (s == "Birdseye") {
109.                 this.map.SetMapStyle(VEMapStyle.Birdseye);
110.             }
111.             else if (s == "BirdseyeHybrid") {
112.                 this.map.SetMapStyle(VEMapStyle.BirdseyeHybrid);
113.             }
114.             else {
115.                 alert("ChangeMapStyle");
116.             }
117.  
118.         }  
119. }

3) Loaded the Bing Map based upon it’s Longitude and Latitude on user control.ascx file.

UserControl.ascx

1. <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
2. <script src="http://nmadan/_layouts/CBingMaps.js&quot; type="text/javascript"></script>
3. <script src="http://nmadan/_layouts/CGoogleMaps.js&quot; type="text/javascript"></script>
4. <script type="text/javascript">
5.  
6.     function addLoadEvent(func) {
7.         var oldonload = window.onload;
8.         if (typeof window.onload != 'function')
9.         { window.onload = func; }
10.         else {
11.             window.onload = function ()
12.             { oldonload(); func(); }
13.         }
14.     }
15.  
16.     //addLoadEvent(GetMap);
17. var bingMaps = null;
18. var cGoogleMap =null;
19. function loadBingMap()
20. {
21.      bingMaps = new CBingMaps('myMap');
22.      var longitutue = <%= Longitute %>;
23.      var latitute = <%= Latitute %>;
24.      var fixed = '<%= Fixed.ToString() %>';
25.      var location = '<%= Location.ToString() %>';
26.      var mapStyle = '<%=MapStyle.ToString() %>';
27.      var dashBorad = '<%= DashBoard.ToString() %>';
28.      var zoom = <%= Zoom %>;
29.      var mode = '<%= Mode.ToString() %>';
30.      bingMaps.GetMap(longitutue, latitute, fixed, location, zoom, mode, mapStyle);
31. }
32. SP.SOD.executeOrDelayUntilScriptLoaded(loadBingMap, "CBingMaps.js");
33. addLoadEvent(loadBingMap);
34. </script>
35. <div id='myMap' style="position: relative; width: 600px; height: 400px;"></div>

4) Created the properties to configure the following feature :-

Ø We can easily get the desired location by providing the Longitude and Latitude.

Ø We can show multiple locations in the map by providing the Cid number. Process to generate the Cid number will be provided in detail further.

Ø We can do Zoom Out to reach deep inside the map or vice-versa.

Ø We can configure the map style from web part properties i.e. Map Properties to Road, Birdseye, Araiel etc.

Ø We can configure the mode of the map i.e. 2D or 3D.

Ø We can configure the visibility of Dashboard (A control which is used to change the map settings though UI.) to true/false.

Ø We can configure the map should be fixed and cannot be modified by the end user.

Either we can configure them as a web part properties or Ribbon. Following is sample to configure as a web part properties :-

All the features has been implemented by web part properties. A new group has been created i.e. Map Properties to configure the map.

1. Longitude & Latitude :- There are two text boxes in which we need to provide the longitude and latitude of the location. For e.g.Banglore Longitude is 13.004558 and latitude is 77.651367. following are the steps to get the two axis :-

1. Go to Windows Live Local.

2. Sign in to your account, or create one if you don’t already have one.

3. Create a collection of shapes on your scratch pad.

4. Save the collection, providing a title and description. Make sure that you select the option to make the collection public. Once you have your collection saved, select the Share option and then the Copy to link to clipboard option. The clipboard should then contain a link similar to http://www.bing.com/mapindia/default.aspx?v=2&FORM=LMLTCC&cp=12.811801~80.595703&style=r&lvl=4&tilt=-90&dir=0&alt=-1000&phx=0&phy=0&phscl=1&cid=E60BB9C18B08E70A!281&encType=1. This link Please copy the cp from the query string i.e. 12.811801~80.595703. Value before ~ is Longitude and later is Latitude.

2. Map Provider :- It’s not implemented but will be coming soon in next version
3. Location Cid: – Providing Cid is better if you would like to show multiple locations. You have to follow the same steps as you have followed in first point. This time you need to copy the cid from query string i.e. E60BB9C18B08E70A!281 . When you are working with cid, please provide the longitude and latitude to 0 else cid will not work.
   Cid is collection of location and it’s implanted as a separate layer in this web part. Here are code details :-

map = new VEMap(‘myMap’); map.LoadMap(); var layer = new VEShapeLayer(); var veLayerSpec = new VEShapeSourceSpecification(VEDataType.VECollection,”98C746DDDC3FE6CA!104″, layer); map.ImportShapeLayerData(veLayerSpec);

4. Map Styles: – Bing map provide 7 (Road, shaded, Aerial, Hybrid, Oblique, Birdseye, and BirdeyeHybrid) map style through VEMapStyle API. You can’t get all these styles in 3D maps.

5. Map Mode: – You can see the Bing maps in two i.e. 2D and 3D. To access the 3D maps you need to install a executable from www.bing.com/maps/Help/VE3DInstall .
6. Zoom :- You can select the zoom between 1 to Nineteen.
7. Fixed Map: – if you don’t want to move inside the map and don’t want end use to zoomIn or Zoom out, then you fixed the map by selecting the “Fixed the map” checkbox or vice-versa.

DashBoard :- Following blue color control called dashboard in the Bing Maps. If you don’t want to show the dashboard just unselect the “DashBoard” checkbox or vice-versa.

 

Web part propertires

1. #region Longitute
2.      private double longitute = 0;
3.      private const double c_longitute = 0;
4.  
5.      [System.Web.UI.WebControls.WebParts.WebBrowsable(true),
6.      System.Web.UI.WebControls.WebParts.WebDisplayName("Longitute"),
7.      System.Web.UI.WebControls.WebParts.WebDescription("Enter the Longitude"),
8.      System.Web.UI.WebControls.WebParts.Personalizable(
9.      System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),
10.      System.ComponentModel.Category("Map Properties"),
11.      System.ComponentModel.DefaultValue(c_longitute)]
12.  
13.      public double Longitute
14.      {
15.          get
16.          {
17.              return longitute;
18.          }
19.          set
20.          {
21.              longitute = value;
22.          }
23.      }
24.      #endregion
25.  
26.      #region Latitute
27.      private double latitute = 0;
28.      private const double c_latitute = 0;
29.     
30.      [System.Web.UI.WebControls.WebParts.WebBrowsable(true),
31.     System.Web.UI.WebControls.WebParts.WebDisplayName("Latitute"),
32.     System.Web.UI.WebControls.WebParts.WebDescription("Enter the Latitude."),
33.     System.Web.UI.WebControls.WebParts.Personalizable(
34.     System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),
35.     System.ComponentModel.Category("Map Properties"),
36.     System.ComponentModel.DefaultValue(c_latitute)]
37.  
38.      public double Latitute
39.      {
40.          get
41.          {
42.              return latitute;
43.          }
44.          set
45.          {
46.              latitute = value;
47.          }
48.      }
49.      #endregion
50.  
51.      #region MapProvider
52.     
53.      public enum MyMapProvider
54.      {
55.          Bing = 0,
56.          Google = 1,
57.          Both = 2
58.      }
59.      protected MyMapProvider mapProvider;
60.  
61.  
62.      [System.Web.UI.WebControls.WebParts.WebBrowsable(true),
63.     System.Web.UI.WebControls.WebParts.WebDisplayName("Map Provider"),
64.     System.Web.UI.WebControls.WebParts.WebDescription("Select the Map Provide."),
65.     System.Web.UI.WebControls.WebParts.Personalizable(
66.     System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),
67.     System.ComponentModel.Category("Map Properties"),
68.     System.ComponentModel.DefaultValue(MyMapProvider.Bing)]
69.  
70.      public MyMapProvider MapProvider
71.      {
72.          get
73.          {
74.              return mapProvider;
75.          }
76.          set
77.          {
78.              mapProvider = value;
79.          }
80.      }
81.      #endregion
82.  
83.      #region Location
84.      private string location;
85.      
86.      [System.Web.UI.WebControls.WebParts.WebBrowsable(true),
87.     System.Web.UI.WebControls.WebParts.WebDisplayName("Location Cid."),
88.     System.Web.UI.WebControls.WebParts.WebDescription("Enter the location cid from the Bing Maps."),
89.     System.Web.UI.WebControls.WebParts.Personalizable(
90.     System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),
91.     System.ComponentModel.Category("Map Properties"),
92.     System.ComponentModel.DefaultValue("E60BB9C18B08E70A!281"),
93.     XmlElement(typeof(string))]
94.      public string Location
95.      {
96.          get
97.          {
98.              return location;
99.          }
100.          set
101.          {
102.              location = value;
103.          }
104.      }
105.      #endregion
106.  
107.      #region Map Styles
108.      public enum MapStyles {Road = 0, Shaded, Aerial, Hybrid, Oblique, Birdseye, BirdseyeHybrid};
109.  
110.      protected MapStyles mapstyle;
111.      [System.Web.UI.WebControls.WebParts.WebBrowsable(true),
112.     System.Web.UI.WebControls.WebParts.WebDisplayName("Map Style"),
113.     System.Web.UI.WebControls.WebParts.WebDescription("Select any type of map style like Road, Shaded, Hybrid etc"),
114.     System.Web.UI.WebControls.WebParts.Personalizable(
115.     System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),
116.     System.ComponentModel.Category("Map Properties"),
117.     System.ComponentModel.DefaultValue(MapStyles.Road)]
118.      public MapStyles MapStyle
119.      {
120.          get
121.          {
122.              return mapstyle;
123.          }
124.          set
125.          {
126.              mapstyle = value;
127.          }
128.      }
129.      #endregion
130.  
131.      #region Map Mode
132.      public enum MapMode
133.      {
134.          Mode2D = 0,
135.          Mode3D
136.  
137.      };
138.  
139.      protected MapMode mapMode;
140.      [System.Web.UI.WebControls.WebParts.WebBrowsable(true),
141.     System.Web.UI.WebControls.WebParts.WebDisplayName("Map Mode"),
142.     System.Web.UI.WebControls.WebParts.WebDescription("Select any type of maps mode like 2D or 3D"),
143.     System.Web.UI.WebControls.WebParts.Personalizable(
144.     System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),
145.     System.ComponentModel.Category("Map Properties"),
146.     System.ComponentModel.DefaultValue(MapMode.Mode2D)]
147.      public MapMode Mode
148.      {
149.          get
150.          {
151.              return mapMode;
152.          }
153.          set
154.          {
155.              mapMode = value;
156.          }
157.      }
158.      #endregion
159.  
160.      #region Zoom Level
161.      public enum ZoomLevel
162.      {   
163.          One=0,
164.          Two=1,
165.          Three=2,
166.          Four=3,
167.          Five=4,
168.          Six=5,
169.          Seven=6,
170.          Eight=7,
171.          Nine=8,
172.          Ten=9,
173.          Eleven = 10,
174.          Tweleve=11,
175.          Thirteen = 12,
176.          Fourteen = 13,
177.          Fifteen= 14,
178.          Sixteen = 15,
179.          Seventeen = 16,
180.          Eighteen =17,
181.          Nineteen= 18
182.      
183.      };
184.  
185.      protected ZoomLevel zoomLevel;
186.      [System.Web.UI.WebControls.WebParts.WebBrowsable(true),
187.     System.Web.UI.WebControls.WebParts.WebDisplayName("Zoom"),
188.     System.Web.UI.WebControls.WebParts.WebDescription("Select the zoom of map between 1 to 19."),
189.     System.Web.UI.WebControls.WebParts.Personalizable(
190.     System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),
191.     System.ComponentModel.Category("Map Properties"),
192.     System.ComponentModel.DefaultValue(ZoomLevel.Four)]
193.      public ZoomLevel Zoom
194.      {
195.          get
196.          {
197.              return zoomLevel;
198.          }
199.          set
200.          {
201.              zoomLevel = value;
202.          }
203.      }
204.      #endregion
205.  
206.      #region Fixed
207.      private bool m_fixed = false;
208.      private const bool c_fixed = false;
209.  
210.      [System.Web.UI.WebControls.WebParts.WebBrowsable(true),
211.     System.Web.UI.WebControls.WebParts.WebDisplayName("Fixed the Map"),
212.     System.Web.UI.WebControls.WebParts.WebDescription("A Boolean value that specifies whether the map view is displayed as a fixed map that the user cannot change. Optional. Default is false."),
213.     System.Web.UI.WebControls.WebParts.Personalizable(
214.     System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),
215.     System.ComponentModel.Category("Map Properties"),
216.     System.ComponentModel.DefaultValue(false)]
217.  
218.      public bool Fixed
219.      {
220.          get
221.          {
222.              return m_fixed;
223.          }
224.          set
225.          {
226.              m_fixed = value;
227.          }
228.      }
229.      #endregion
230.  
231.      #region DashBoard
232.      private bool dashBoard = false;
233.      private const bool c_DashBoard = false;
234.  
235.      [System.Web.UI.WebControls.WebParts.WebBrowsable(true),
236.     System.Web.UI.WebControls.WebParts.WebDisplayName("DashBoard"),
237.     System.Web.UI.WebControls.WebParts.WebDescription("Would you like to see the DashBoard?"),
238.     System.Web.UI.WebControls.WebParts.Personalizable(
239.     System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),
240.     System.ComponentModel.Category("Map Properties"),
241.     System.ComponentModel.DefaultValue("")]
242.  
243.      public bool DashBoard
244.      {
245.          get
246.          {
247.              return dashBoard;
248.          }
249.          set
250.          {
251.              dashBoard = value;
252.          }
253.      }
254.      #endregion

if you would like to show inside the Ribbon then you need to create a page component and add a contextual Ribbon control

 

ContextualPageComponent.js

1. Type.registerNamespace('ContextualTabWebPart');
2.  
3.  
4. var _webPartPageComponentId;
5. ContextualTabWebPart.CustomPageComponent = function ContextualTabWebPart_CustomPageComponent(webPartPcId) {
6.     this._webPartPageComponentId = webPartPcId;
7.      ContextualTabWebPart.CustomPageComponent.initializeBase(this);
8. }
9.  
10.  
11. ContextualTabWebPart.CustomPageComponent.prototype = {
12.  
13.  
14.     init: function ContextualTabWebPart_CustomPageComponent$init() { },
15.  
16.     receiveFocus: function () {
17.         return true;
18.     },
19.  
20.     yieldFocus: function () {
21.         return true;
22.     },
23.  
24.     getFocusedCommands: function ContextualTabWebPart_CustomPageComponent$getFocusedCommands() {
25.         return [];
26.     },
27.  
28.     getGlobalCommands: function ContextualTabWebPart_CustomPageComponent$getGlobalCommands() {
29.         return ['GoogleTab.EnableMapType', 'CustomContextualTab.CIDLocation', 'CustomContextualTab.lblLongitude', 'CustomContextualTab.FixedMapCommand', 'CustomContextualTab.LoadMapCommand', 'GoogleTab.GoogleGroup', 'GoogleTab.EnableCustomTab', 'GoogleTab.LoadGoogleMapCommand', 'CustomContextualTab.EnableZoom', 'CustomContextualTab.Latitude', 'CustomContextualTab.Longitude', 'CustomContextualTab.GetDynamicZoomXml', 'CustomContextualTab.GetDynamicModeXml', 'CustomContextualTab.DoDynamicModeXml', 'CustomContextualTab.EnableMapMode', 'CustomContextualTab.GetDynamicMenuXml', 'CustomContextualTab.EnableMapStyle', 'CustomContextualTab.DashBoard', 'CustomContextualTab.EnableCustomTab', 'CustomContextualTab.EnableCustomGroup', 'CustomContextualTab.Longitude', 'CustomContextualTab.Latitude'];
30.     },
31.  
32.  
33.     isFocusable: function ContextualTabWebPart_CustomPageComponent$isFocusable() {
34.         return true;
35.     },
36.  
37.     canHandleCommand: function ContextualTabWebPart_CustomPageComponent$canHandleCommand(commandId) {
38.         //Contextual Tab commands
39.         if ((commandId === 'GoogleTab.EnableMapType') || (commandId === 'CustomContextualTab.CIDLocation') || (commandId === 'CustomContextualTab.lblLongitude') || (commandId === 'CustomContextualTab.FixedMapCommand') || (commandId === 'CustomContextualTab.LoadMapCommand') || (commandId === 'GoogleTab.GoogleGroup') || (commandId === 'GoogleTab.EnableCustomTab') || (commandId === 'GoogleTab.LoadGoogleMapCommand') || (commandId === 'CustomContextualTab.EnableZoom') || (commandId === 'CustomContextualTab.Latitude') || (commandId === 'CustomContextualTab.Longitude') || (commandId === 'CustomContextualTab.GetDynamicZoomXml') || (commandId === 'CustomContextualTab.GetDynamicModeXml') || (commandId === 'CustomContextualTab.DoDynamicModeXml') || (commandId === 'CustomContextualTab.EnableMapMode') || (commandId === 'CustomContextualTab.GetDynamicMenuXml') || (commandId === 'CustomContextualTab.EnableMapStyle') || (commandId === 'CustomContextualTab.DashBoard') || (commandId === 'CustomContextualTab.EnableCustomTab') || (commandId === 'CustomContextualTab.EnableCustomGroup') || (commandId === 'CustomContextualTab.Longitude') || (commandId === 'CustomContextualTab.Latitude')) {
40.             return true;
41.         }
42.     },
43.  
44.  
45.     handleCommand: function ContextualTabWebPart_CustomPageComponent$handleCommand(commandId, properties, sequence) {
46.  
47.  
48.         if (commandId == 'CustomContextualTab.LoadMapCommand') {
49.  
50.             var notificationId = SP.UI.Notify.addNotification('Loading the Bing Map.');
51.  
52.             var googleMap = document.getElementById('GoogleMap');
53.             googleMap.setAttribute("style", "display:none;");
54.  
55.             var bingMap = document.getElementById('myMap');
56.             bingMap.setAttribute("style", "position: relative; width: 600px; height: 400px;");
57.  
58.             var longitutue = document.getElementById('Ribbon.CustomTabExample.CustomGroupExample.Longitude').value;
59.             var latitute = document.getElementById('Ribbon.CustomTabExample.CustomGroupExample.Latitude').value;
60.             var fixed = bingMaps.staticMap;
61.             var location = document.getElementById('Ribbon.CustomTabExample.CustomGroupExample.CIDLocation').value;
62.             var mapStyle = 'Aerial';
63.             var zoom = 4;
64.             var mode = 'Mode2D';
65.             bingMaps.GetMap(longitutue, latitute, fixed, location, zoom, mode, mapStyle);
66.  
67.         }
68.         if (commandId == 'GoogleTab.LoadGoogleMapCommand') {
69.             var notificationId = SP.UI.Notify.addNotification('Loading the Google Map.');
70.  
71.             var googleMap = document.getElementById('GoogleMap');
72.             googleMap.setAttribute("style", "position: relative; width: 600px; height: 400px;");
73.             var bingMap = document.getElementById('myMap');
74.             bingMap.setAttribute("style", "display:none;");
75.             cGoogleMap = new CGoogleMaps();
76.             cGoogleMap.GetMap('40.702147', '-74.015794', 'Brooklyn + Bridge, New + York, NY', '14', '512×512', "roadmap");
77.  
78.         }
79.         if (commandId == 'CustomContextualTab.CIDLocation') {
80.         }
81.         if (commandId == 'CustomContextualTab.Longitude') {
82.         }
83.         if (commandId == 'CustomContextualTab.Latitude') {
84.         }
85.         if (commandId == 'CustomContextualTab.DashBoard') {
86.             bingMaps.DashBoard(properties);
87.         }
88.         if (commandId == 'CustomContextualTab.EnableMapStyle') {
89.             bingMaps.ChangeMapStyle(properties);
90.         }
91.         if (commandId == 'CustomContextualTab.GetDynamicMenuXml') {
92.             ExecuteOrDelayUntilScriptLoaded(Function.createDelegate(null, GetDynamicMenuXml), 'SP.js');
93.             properties.PopulationXML = GetDynamicMenuXml();
94.         }
95.         if (commandId == 'CustomContextualTab.EnableMapMode') {
96.             bingMaps.setMapMode(properties.SourceControlId.toString());
97.         }
98.         if (commandId == 'CustomContextualTab.DoDynamicModeXml') {
99.             //bingMaps.setMapMode(properties);
100.             loadCurrentModeList();
101.         }
102.         if (commandId == 'CustomContextualTab.GetDynamicModeXml') {
103.             ExecuteOrDelayUntilScriptLoaded(Function.createDelegate(null, GetDynamicModeXml), 'SP.js');
104.             properties.PopulationXML = GetDynamicModeXml();
105.         }
106.         if (commandId == 'CustomContextualTab.EnableZoom') {
107.             bingMaps.setMapMode(properties.SourceControlId.toString());
108.         }
109.         if (commandId == 'CustomContextualTab.GetDynamicZoomXml') {
110.             ExecuteOrDelayUntilScriptLoaded(Function.createDelegate(null, GetDynamicZoomXml), 'SP.js');
111.             properties.PopulationXML = GetDynamicZoomXml();
112.         }
113.         if (commandId == 'CustomContextualTab.FixedMapCommand') {
114.             alert(properties.CommandValueId);
115.             if (properties.On == true) {
116.                 bingMaps.staticMap = true;
117.             }
118.             else {
119.                 bingMaps.staticMap = false;
120.             }
121.  
122.         }
123.         if (commandId == 'GoogleTab.EnableMapType') {
124.             alert('EnableMapType');
125.         }
126.         if (commandId == 'GoogleTab.GetDynamicGoogleMapTypeXml') {
127.             ExecuteOrDelayUntilScriptLoaded(Function.createDelegate(null, GetDynamicZoomXml), 'SP.js');
128.             properties.PopulationXML = GetDynamicGoogleMapTypeXml();
129.         }
130.  
131.     },
132.  
133.     refreshRibbon: function () {
134.         SP.Ribbon.PageManager.get_instance().get_commandDispatcher().executeCommand(Commands.CommandIds.ApplicationStateChanged);
135.     },
136.  
137.     getId: function ContextualTabWebPart_CustomPageComponent$getId() {
138.         return this._webPartPageComponentId;
139.     }
140. }
141.  
142.  
143. //Register classes
144. //ContextualTabWebPart.CustomPageComponent.registerClass('ContextualTabWebPart.CustomPageComponent', CUI.Page.PageComponent);
145. // Notify waiting jobs
146. if (typeof (NotifyScriptLoadedAndExecuteWaitingJobs) != "undefined")
147. NotifyScriptLoadedAndExecuteWaitingJobs("MapContextualTabPageComponent.js");
148.  
149. function GetDynamicMenuXml() {
150.     var dynamicMenuXml =
151.     '<Menu Id="Ribbon.CustomTabExample.CustomGroupExample.MapStyle.Menu">'
152.     + '<MenuSection Id="Ribbon.CustomTabExample.CustomGroupExample.MapStyle.Section" DisplayMode="Menu16">'
153.     + '<Controls Id="Ribbon.CustomTabExample.CustomGroupExample.MapStyle.Section.Controls">';
154.     var mapStyle = new Array("Shaded", "Aerial", "Hybrid", "Oblique", "Birdseye", "BirdseyeHybrid");
155.     for (i = 0; i < mapStyle.length; i++) {
156.         var buttonXML = String.format(
157.            '<Button Id="' + mapStyle[i].toString() + '" '
158.            + 'Command="CustomContextualTab.EnableMapStyle" '
159.            + 'CommandValueId ="' + mapStyle[i].toString() + '" '
160.            + 'MenuItemId="{0}" '
161.            + 'LabelText="'+ mapStyle[i].toString() +'" '
162.            + 'ToolTipTitle="'+ mapStyle[i].toString() +'" '
163.           + 'ToolTipDescription="' + mapStyle[i].toString() + '" />',
164.            i);
165.         dynamicMenuXml += buttonXML;
166.     }
167.     dynamicMenuXml += '</Controls>' + '</MenuSection>' + '</Menu>';
168.     return dynamicMenuXml;
169. }
170. var mode = null;
171. var querySucceded = false;
172.  
173. function loadCurrentModeList() {
174.     var mode = new Array("MODE2D", "MODE3D");
175.     querySucceded = true;
176. }
177. function GetDynamicModeXml() {
178.     var dynamicMenuXml =
179.     '<Menu Id="Ribbon.CustomTabExample.CustomGroupExample.Mode.Menu">'
180.     + '<MenuSection Id="Ribbon.CustomTabExample.CustomGroupExample.Mode.Section" DisplayMode="Menu16">'
181.     + '<Controls Id="Ribbon.CustomTabExample.CustomGroupExample.Mode.Section.Controls">';
182.     var mode = new Array("MODE2D", "MODE3D");
183.     for (i = 0; i < mode.length; i++) {
184.         var buttonXML = String.format(
185.            '<Button Id="' + mode[i].toString() + '" '
186.            + 'Command="CustomContextualTab.EnableMapMode" '
187.            + 'CommandValueId ="' + mode[i].toString() + '" '
188.            + 'MenuItemId="{0}" '
189.            + 'LabelText="' + mode[i].toString() + '" '
190.            + 'ToolTipTitle="' + mode[i].toString() + '" '
191.           + 'ToolTipDescription="' + mode[i].toString() + '" />',
192.            i);
193.         dynamicMenuXml += buttonXML;
194.     }
195.     dynamicMenuXml += '</Controls>' + '</MenuSection>' + '</Menu>';
196.     return dynamicMenuXml;
197. }
198.  
199. function GetDynamicZoomXml() {
200.     var dynamicMenuXml =
201.     '<Menu Id="Ribbon.CustomTabExample.CustomGroupExample.Mode.Menu">'
202.     + '<MenuSection Id="Ribbon.CustomTabExample.CustomGroupExample.Mode.Section" DisplayMode="Menu16">'
203.     + '<Controls Id="Ribbon.CustomTabExample.CustomGroupExample.Mode.Section.Controls">';
204.     var zoom = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19");
205.     for (i = 0; i < zoom.length; i++) {
206.         var buttonXML = String.format(
207.            '<Button Id="' + zoom[i].toString() + '" '
208.            + 'Command="CustomContextualTab.EnableMapMode" '
209.            + 'CommandValueId ="' + zoom[i].toString() + '" '
210.            + 'MenuItemId="{0}" '
211.            + 'LabelText="' + zoom[i].toString() + '" '
212.            + 'ToolTipTitle="' + zoom[i].toString() + '" '
213.           + 'ToolTipDescription="' + zoom[i].toString() + '" />',
214.            i);
215.         dynamicMenuXml += buttonXML;
216.     }
217.     dynamicMenuXml += '</Controls>' + '</MenuSection>' + '</Menu>';
218.     return dynamicMenuXml;
219. }
220.  
221.  
222. //Google Map functions
223. //==============================================
224. function GetDynamicGoogleMapTypeXml() {
225.     var dynamicMenuXml =
226.     '<Menu Id="Ribbon.GoogleTab.GoogleGroup.EnableMapType.Menu">'
227.     + '<MenuSection Id="Ribbon.GoogleTab.GoogleGroup.EnableMapType.Section" DisplayMode="Menu16">'
228.     + '<Controls Id="Ribbon.GoogleTab.GoogleGroup.EnableMapType.Section.Controls">';
229.     var mapStyle = new Array("roadmap", "Aerial");
230.     for (i = 0; i < mapStyle.length; i++) {
231.         var buttonXML = String.format(
232.            '<Button Id="' + mapStyle[i].toString() + '" '
233.            + 'Command="GoogleTab.EnableMapType" '
234.            + 'CommandValueId ="' + mapStyle[i].toString() + '" '
235.            + 'MenuItemId="{0}" '
236.            + 'LabelText="' + mapStyle[i].toString() + '" '
237.            + 'ToolTipTitle="' + mapStyle[i].toString() + '" '
238.           + 'ToolTipDescription="' + mapStyle[i].toString() + '" />',
239.            i);
240.         dynamicMenuXml += buttonXML;
241.     }
242.     dynamicMenuXml += '</Controls>' + '</MenuSection>' + '</Menu>';
243.     return dynamicMenuXml;
244. }

 

Contextual Ribbon xml

1.         private string contextualTab = @"
2. <ContextualGroup Color=""Magenta""
3.      Command=""CustomContextualTab.EnableContextualGroup""
4.      Id=""Ribbon.CustomContextualTabGroup""
5.      Title=""Map Settings""
6.      Sequence=""502""
7.      ContextualGroupId=""CustomContextualTabGroup"">
8.   <Tab
9.       Id=""Ribbon.CustomTabExample""
10.       Title=""Bing""
11.       Description=""www.bing.com/maps""
12.       Command=""CustomContextualTab.EnableCustomTab""
13.       Sequence=""513"">
14.     <Scaling
15.       Id=""Ribbon.CustomTabExample.Scaling"">
16.       <MaxSize
17.         Id=""Ribbon.CustomTabExample.MaxSize""
18.         GroupId=""Ribbon.CustomTabExample.CustomGroupExample""
19.         Size=""OneLargeTwoMedium""/>
20.       <Scale
21.         Id=""Ribbon.CustomTabExample.Scaling.CustomTabScaling""
22.         GroupId=""Ribbon.CustomTabExample.CustomGroupExample""
23.         Size=""OneLargeTwoMedium"" />
24.     </Scaling>
25.     <Groups Id=""Ribbon.CustomTabExample.Groups"">
26.       <Group
27.         Id=""Ribbon.CustomTabExample.CustomGroupExample""
28.         Description=""This is a custom group!""
29.         Title=""Configuation""
30.         Command=""CustomContextualTab.EnableCustomGroup""
31.         Sequence=""52""
32.         Template=""Ribbon.Templates.CustomTemplateExample"">
33.         <Controls  Id=""Ribbon.CustomTabExample.CustomGroupExample.Controls"">
34.           <Label
35.                   Id=""Ribbon.CustomTabExample.CustomGroupExample.lblLongitude""
36.                   Command=""CustomContextualTab.lblLongitude""
37.                   LabelText=""Longitude""
38.                   TemplateAlias=""cust1""
39.                   Sequence=""11""
40.                 />
41.           <TextBox
42.              Id=""Ribbon.CustomTabExample.CustomGroupExample.Longitude""
43.              Command=""CustomContextualTab.Longitude""
44.              ToolTipTitle=""Longitude""
45.              ToolTipDescription=""Please enter the Longitude.""
46.              MaxLength=""512""
47.              TemplateAlias=""cust2""
48.              Image16by16=""/_layouts/images/DATERANGELAST30DAYS_16X16.PNG""
49.              Image32by32=""/_layouts/images/DATERANGELAST30DAYS_32X32.PNG""
50.              Sequence=""13""
51.                     />
52.           <Label
53.                  Id=""Ribbon.CustomTabExample.CustomGroupExample.lblLatitude""
54.                  Command=""CustomContextualTab.lblLatitude""
55.                  LabelText=""Latitude""
56.                  TemplateAlias=""cust3""
57.                  Sequence=""16""
58.                 />
59.           <TextBox
60.              Id=""Ribbon.CustomTabExample.CustomGroupExample.Latitude""
61.              Command=""CustomContextualTab.Latitude""
62.              ToolTipTitle=""Latitude""
63.              ToolTipDescription=""Please enter the Latitude.""
64.              MaxLength=""512""
65.              TemplateAlias=""cust4""
66.              Sequence=""17""
67.                     />
68.           <Label
69.                 Id=""Ribbon.CustomTabExample.CustomGroupExample.lblLatitude""
70.                 Command=""CustomContextualTab.lblCIDLocation""
71.                 LabelText=""Cid Location""
72.                 TemplateAlias=""cust5""
73.                 Sequence=""19""
74.                 />
75.           <TextBox
76.              Id=""Ribbon.CustomTabExample.CustomGroupExample.CIDLocation""
77.              Command=""CustomContextualTab.CIDLocation""
78.              ToolTipTitle=""Cid Location""
79.              ToolTipDescription=""Please enter the Cid.""
80.              MaxLength=""512""
81.              TemplateAlias=""cust6""
82.              Image16by16=""/_layouts/images/DATERANGELAST30DAYS_16X16.PNG""
83.              Image32by32=""/_layouts/images/DATERANGELAST30DAYS_32X32.PNG""
84.              Sequence=""21""
85.                     />
86.           <SplitButton
87.                           Id=""Ribbon.CustomTabExample.CustomGroupExample.MapStyle""
88.                           Sequence=""23""
89.                           Command=""CustomContextualTab.EnableMapStyle""
90.                           Image16by16=""/_layouts/$Resources:core,Language;/images/formatmap16x16.png""
91.                           Image16by16Top=""-32""
92.                           Image16by16Left=""-192""
93.                           LabelText=""Map Style""
94.                           ToolTipTitle=""Map Style""
95.                           ToolTipDescription=""Select the Map Style""
96.                           TemplateAlias=""cust7""
97.                           PopulateDynamically=""true""
98.                           PopulateQueryCommand=""CustomContextualTab.GetDynamicMenuXml""
99.                 >
100.           </SplitButton>
101.           <DropDown
102.               Id=""Ribbon.CustomTabExample.CustomGroupExample.Mode""
103.               Sequence=""26""
104.               Command=""CustomContextualTab.EnableMapMode""
105.               PopulateDynamically=""true""
106.               PopulateOnlyOnce=""true""
107.               PopulateQueryCommand=""CustomContextualTab.GetDynamicModeXml""
108.               QueryCommand=""CustomContextualTab.DoDynamicModeXml""
109.               Width=""75px""
110.               TemplateAlias=""cust8"" />
111.           <SplitButton
112.                 Id=""Ribbon.CustomTabExample.CustomGroupExample.Zoom""
113.                 Sequence=""27""
114.                 Command=""CustomContextualTab.EnableZoom""
115.                 Image16by16=""/_layouts/$Resources:core,Language;/images/formatmap16x16.png"" Image16by16Top=""-32"" Image16by16Left=""-192""
116.                 LabelText=""Zoom""
117.                 ToolTipTitle=""Zoom""
118.                 ToolTipDescription=""Zoom""
119.                 TemplateAlias=""cust9""
120.                 PopulateDynamically=""true""
121.                 PopulateQueryCommand=""CustomContextualTab.GetDynamicZoomXml""
122.                 >
123.           </SplitButton>
124.           <ToggleButton
125.           Id=""Ribbon.CustomTabExample.CustomGroupExample.DashBoard""
126.           Command=""CustomContextualTab.DashBoard""
127.           Sequence=""28""
128.           Description=""Would you like to enable the DashBoard?""
129.           Image16by16=""/_layouts/images/DATERANGELAST30DAYS_16X16.PNG""
130.           Image32by32=""/_layouts/images/DATERANGELAST30DAYS_32X32.PNG""
131.           LabelText=""DashBoard""
132.           TemplateAlias=""cust10""/>
133.           <ToggleButton
134.           Id=""Ribbon.CustomTabExample.CustomGroupExample.FixedMap""
135.           Command=""CustomContextualTab.FixedMapCommand""
136.           Sequence=""29""
137.           Description=""Would you like to fix the Map?""
138.           Image16by16=""/_layouts/GPSImages/Bing.png""
139.           Image32by32=""/_layouts/GPSImages/Bing.png""
140.           LabelText=""Fix the Map""
141.           TemplateAlias=""cust11""/>
142.           <Button
143.             Id=""Ribbon.CustomTabExample.CustomGroupExample.LoadMap""
144.             Command=""CustomContextualTab.LoadMapCommand""
145.             Sequence=""31""
146.             Description=""Load the Bing Map.""
147.             Image16by16=""/_layouts/GPSImages/Bing.png""
148.             Image32by32=""/_layouts/GPSImages/Bing.png""
149.             LabelText=""Load Map""
150.             TemplateAlias=""cust12""/>
151.         </Controls>
152.       </Group>
153.     </Groups>
154.   </Tab>
155.   <Tab
156.       Id=""Ribbon.GoogleTab""
157.       Title=""Google""
158.       Description=""www.bing.com/maps""
159.       Command=""GoogleTab.EnableCustomTab""
160.       Sequence=""505"">
161.     <Scaling
162.       Id=""Ribbon.GoogleTab.Scaling"">
163.       <MaxSize
164.         Id=""Ribbon.GoogleTab.MaxSize""
165.         GroupId=""Ribbon.GoogleTab.GoogleGroup""
166.         Size=""OneLargeTwoMedium""/>
167.       <Scale
168.         Id=""Ribbon.GoogleTab.Scaling.CustomTabScaling""
169.         GroupId=""Ribbon.GoogleTab.GoogleGroup""
170.         Size=""OneLargeTwoMedium"" />
171.     </Scaling>
172.     <Groups Id=""Ribbon.GoogleTab.Groups"">
173.       <Group
174.           Id=""Ribbon.GoogleTab.GoogleGroup""
175.           Description=""Google group settings""
176.           Title=""Configuation""
177.           Command=""GoogleTab.GoogleGroup""
178.           Sequence=""52""
179.           Template=""Ribbon.Templates.CustomTemplateExample"">
180.         <Controls  Id=""Ribbon.GoogleTab.GoogleGroup.Controls"">
181.           <Label
182.                   Id=""Ribbon.GoogleTab.GoogleGroup.lblLongitude""
183.                   Command=""GoogleTab.lblLongitude""
184.                   LabelText=""Longitude""
185.                   TemplateAlias=""cust1""
186.                   Sequence=""11""
187.                 />
188.           <TextBox
189.              Id=""Ribbon.GoogleTab.GoogleGroup.Longitude""
190.              Command=""GoogleTab.Longitude""
191.              ToolTipTitle=""Longitude""
192.              ToolTipDescription=""Please enter the Longitude.""
193.              MaxLength=""512""
194.              TemplateAlias=""cust2""
195.              Image16by16=""/_layouts/images/DATERANGELAST30DAYS_16X16.PNG""
196.              Image32by32=""/_layouts/images/DATERANGELAST30DAYS_32X32.PNG""
197.              Sequence=""13""
198.                     />
199.           <Label
200.                  Id=""Ribbon.GoogleTab.GoogleGroup.lblLatitude""
201.                  Command=""GoogleTab.lblLatitude""
202.                  LabelText=""Latitude""
203.                  TemplateAlias=""cust3""
204.                  Sequence=""16""
205.                 />
206.           <TextBox
207.              Id=""Ribbon.GoogleTab.GoogleGroup.Latitude""
208.              Command=""GoogleTab.Latitude""
209.              ToolTipTitle=""Latitude""
210.              ToolTipDescription=""Please enter the Latitude.""
211.              MaxLength=""512""
212.              TemplateAlias=""cust4""
213.              Sequence=""17""
214.                     />
215.           <Label
216.                 Id=""Ribbon.GoogleTab.GoogleGroup.Center""
217.                 Command=""GoogleTab.Center""
218.                 LabelText=""Cid Location""
219.                 TemplateAlias=""cust5""
220.                 Sequence=""19""
221.                 />
222.           <TextBox
223.              Id=""Ribbon.GoogleTab.GoogleGroup.Center""
224.              Command=""GoogleTab.Center""
225.              ToolTipTitle=""Center""
226.              ToolTipDescription=""Please enter the Center.""
227.              MaxLength=""512""
228.              TemplateAlias=""cust6""
229.              Image16by16=""/_layouts/images/DATERANGELAST30DAYS_16X16.PNG""
230.              Image32by32=""/_layouts/images/DATERANGELAST30DAYS_32X32.PNG""
231.              Sequence=""21""
232.                     />
233.           <SplitButton
234.                           Id=""Ribbon.GoogleTab.GoogleGroup.EnableMapType""
235.                           Sequence=""23""
236.                           Command=""GoogleTab.EnableMapType""
237.                           Image16by16=""/_layouts/$Resources:core,Language;/images/formatmap16x16.png""
238.                           Image16by16Top=""-32""
239.                           Image16by16Left=""-192""
240.                           LabelText=""Map Type""
241.                           ToolTipTitle=""Map Type""
242.                           ToolTipDescription=""Select the Map Type""
243.                           TemplateAlias=""cust7""
244.                           PopulateDynamically=""true""
245.                           PopulateQueryCommand=""GoogleTab.GetDynamicGoogleMapTypeXml""
246.                 >
247.           </SplitButton>
248.           <DropDown
249.               Id=""Ribbon.GoogleTab.GoogleGroup.Mode""
250.               Sequence=""26""
251.               Command=""GoogleTab.EnableMapMode""
252.               PopulateDynamically=""true""
253.               PopulateOnlyOnce=""true""
254.               PopulateQueryCommand=""GoogleTab.GetDynamicModeXml""
255.               QueryCommand=""GoogleTab.DoDynamicModeXml""
256.               Width=""75px""
257.               TemplateAlias=""cust8"" />
258.           <SplitButton
259.                 Id=""Ribbon.GoogleTab.GoogleGroup.Zoom""
260.                 Sequence=""27""
261.                 Command=""GoogleTab.EnableZoom""
262.                 Image16by16=""/_layouts/$Resources:core,Language;/images/formatmap16x16.png"" Image16by16Top=""-32"" Image16by16Left=""-192""
263.                 LabelText=""Zoom""
264.                 ToolTipTitle=""Zoom""
265.                 ToolTipDescription=""Zoom""
266.                 TemplateAlias=""cust9""
267.                 PopulateDynamically=""true""
268.                 PopulateQueryCommand=""GoogleTab.GetDynamicZoomXml""
269.                 >
270.           </SplitButton>
271.           <ToggleButton
272.           Id=""Ribbon.GoogleTab.GoogleGroup.DashBoard""
273.           Command=""GoogleTab.DashBoard""
274.           Sequence=""28""
275.           Description=""Would you like to enable the DashBoard?""
276.           Image16by16=""/_layouts/images/DATERANGELAST30DAYS_16X16.PNG""
277.           Image32by32=""/_layouts/images/DATERANGELAST30DAYS_32X32.PNG""
278.           LabelText=""DashBoard""
279.           TemplateAlias=""cust10""/>
280.           <ToggleButton
281.           Id=""Ribbon.GoogleTab.GoogleGroup.FixedMap""
282.           Command=""GoogleTab.FixedMapCommand""
283.           Sequence=""29""
284.           Description=""Would you like to fix the Map?""
285.           Image16by16=""/_layouts/GPSImages/Bing.png""
286.           Image32by32=""/_layouts/GPSImages/Bing.png""
287.           LabelText=""Fix the Map""
288.           TemplateAlias=""cust11""/>
289.           <Button
290.             Id=""Ribbon.CustomTabExample.CustomGroupExample.LoadMap""
291.             Command=""GoogleTab.LoadGoogleMapCommand""
292.             Sequence=""33""
293.             Description=""Load the Google Map.""
294.             LabelText=""Load Map""
295.             TemplateAlias=""cust12""/>
296.         </Controls>
297.       </Group>
298.     </Groups>
299.   </Tab>
300. </ContextualGroup>";
301.  
302.         private string contextualTabTemplate = @"
303. <GroupTemplate Id=""Ribbon.Templates.CustomTemplateExample"">
304.     <Layout Title=""OneLargeTwoMedium"" LayoutTitle=""OneLargeTwoMedium"">
305.       <Section Alignment=""Top"" Type=""TwoRow"">
306.         <Row>
307.           <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust1"" />
308.         </Row>
309.         <Row>
310.           <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust2"" />
311.         </Row>
312.       </Section>
313.       <Section Alignment=""Top"" Type=""TwoRow"">
314.         <Row>
315.           <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust3"" />
316.         </Row>
317.         <Row>
318.           <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust4"" />
319.         </Row>
320.       </Section>
321.       <Section Alignment=""Top"" Type=""TwoRow"">
322.         <Row>
323.           <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust5"" />
324.         </Row>
325.         <Row>
326.           <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust6"" />
327.         </Row>
328.       </Section>
329.       <Section Alignment=""Top"" Type=""OneRow"">
330.         <Row>
331.           <ControlRef DisplayMode=""Large"" TemplateAlias=""cust11"" />
332.         </Row>
333.       </Section>
334.       <Section Alignment=""Top"" Type=""OneRow"">
335.         <Row>
336.           <ControlRef DisplayMode=""Large"" TemplateAlias=""cust12"" />
337.         </Row>
338.       </Section>
339.       <Section Alignment=""Top"" Type=""TwoRow"">
340.         <Row>
341.           <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust7"" />
342.         </Row>
343.         <Row>
344.           <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust8"" />
345.         </Row>
346.       </Section>
347.       <Section Alignment=""Top"" Type=""TwoRow"">
348.         <Row>
349.           <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust9"" />
350.         </Row>
351.         <Row>
352.           <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust10"" />
353.         </Row>
354.       </Section>
355.     </Layout>
356.   </GroupTemplate>";
357.  
358.         private string googleContextualTabTemplate = @"
359.   <GroupTemplate Id=""Ribbon.Templates.GoogleTemplate"">
360.     <Layout Title=""OneLargeTwoMedium"" LayoutTitle=""OneLargeTwoMedium"">
361.       <Section Alignment=""Top"" Type=""OneRow"">
362.         <Row>
363.           <ControlRef DisplayMode=""Large"" TemplateAlias=""cust12"" />
364.         </Row>
365.       </Section>
366.     </Layout>
367.   </GroupTemplate>";
368.  
369.         public string DelayScript
370.         {
371.             get
372.             {
373.                 string webPartPageComponentId = SPRibbon.GetWebPartPageComponentId(this);
374.                 return @"
375. <script type=""text/javascript"">
376.  
377.             function _addCustomPageComponent()
378.             {
379.                 var _customPageComponent = new ContextualTabWebPart.CustomPageComponent('" + webPartPageComponentId + @"');
380.                 SP.Ribbon.PageManager.get_instance().addPageComponent(_customPageComponent);
381.  
382.             }
384.  
385.             function _registerCustomPageComponent()
386.             {
387.                 SP.SOD.registerSod(""MapContextualTabPageComponent.js"", ""\/_layouts\/MapContextualTabPageComponent.js"");
388.                 SP.SOD.executeFunc(""MapContextualTabPageComponent.js"", ""ContextualWebPart.CustomPageComponent"", _addCustomPageComponent);
389.             }
390.  
391.             SP.SOD.executeOrDelayUntilScriptLoaded(_registerCustomPageComponent, ""sp.ribbon.js"");
392.  
393. </script>";
394.             }
395.         }
396.  
397.         public WebPartContextualInfo WebPartContextualInfo
398.         {
399.             get
400.             {
401.                 WebPartContextualInfo info = new WebPartContextualInfo();
402.                 WebPartRibbonContextualGroup contextualGroup = new WebPartRibbonContextualGroup();
403.                 //WebPartRibbonContextualGroup googleContextualGroup = new WebPartRibbonContextualGroup();
404.                 WebPartRibbonTab ribbonTab = new WebPartRibbonTab();
405.                 WebPartRibbonTab googleRibbonTab = new WebPartRibbonTab();
406.  
407.                 //Create the contextual group object and initialize its values.
408.                 contextualGroup.Id = "Ribbon.CustomContextualTabGroup";
409.                 contextualGroup.Command = "CustomContextualTab.EnableContextualGroup";
410.                 contextualGroup.VisibilityContext = "CustomContextualTab.CustomVisibilityContext";
411.  
412.                 //Create the tab object and initialize its values.
413.                 ribbonTab.Id = "Ribbon.CustomTabExample";
414.                 ribbonTab.VisibilityContext = "CustomContextualTab.CustomVisibilityContext";
415.  
416.                 //Create the contextual group object and initialize its values.
417.                 //contextualGroup.Id = "Ribbon.GoogleContextualTabGroup";
418.                 //contextualGroup.Command = "GoogleContextualTab.EnableContextualGroup";
419.                 //contextualGroup.VisibilityContext = "GoogleContextualTab.CustomVisibilityContext";
420.  
421.                 ////Create the tab object and initialize its values.
422.                 ribbonTab.Id = "Ribbon.GoogleTab";
423.                 ribbonTab.VisibilityContext = "GoogleContextualTab.CustomVisibilityContext";
424.  
425.                 //Add the contextual group and tab to the WebPartContextualInfo.
426.                 info.ContextualGroups.Add(contextualGroup);
427.                 //info.ContextualGroups.Add(googleContextualGroup);
428.                 //info.Tabs.Add(googleRibbonTab);
429.                 info.Tabs.Add(ribbonTab);
430.                 info.PageComponentId = SPRibbon.GetWebPartPageComponentId(this);
431.  
432.                 return info;
433.             }
434.         }

Code Snippet

1. private void AddContextualTab()
2.         {
3.  
4.             //Gets the current instance of the ribbon on the page.
5.             Microsoft.Web.CommandUI.Ribbon ribbon = SPRibbon.GetCurrent(this.Page);
6.  
7.  
8.             //Prepares an XmlDocument object used to load the ribbon extensions.
9.             XmlDocument ribbonExtensions = new XmlDocument();
10.  
11.  
12.             //Load the contextual tab XML and register the ribbon extension.
13.             ribbonExtensions.LoadXml(this.contextualTab);
14.             ribbon.RegisterDataExtension(ribbonExtensions.FirstChild, "Ribbon.ContextualTabs._children");
15.             
16.             //Load the custom templates and register the ribbon extension.
17.             ribbonExtensions.LoadXml(this.contextualTabTemplate);
18.             ribbon.RegisterDataExtension(ribbonExtensions.FirstChild, "Ribbon.Templates._children");
19.  
20.         }
21.  
22.         protected override void OnPreRender(EventArgs e)
23.         {
24.             base.OnPreRender(e);
25.             this.AddContextualTab();
26.             string webPartPageComponentId = SPRibbon.GetWebPartPageComponentId(this);
27.             ClientScriptManager clientScript = this.Page.ClientScript;
28.            
29.             
30.             clientScript.RegisterClientScriptBlock(this.GetType(), "ContextualTabWebPart", this.DelayScript);
31.             SPRibbon currentRibbon = SPRibbon.GetCurrent(this.Page);
32.             currentRibbon.MakeTabAvailable("Ribbon.CustomTabExample");
33.             currentRibbon.MakeContextualGroupInitiallyVisible("Ribbon.CustomContextualTabGroup", string.Empty);
34.            
35.         }

Following are links for your reference :-

Maps Interactive SDK

Bing Maps URL