Bing Maps – V8 Web Control


After Microsoft announced and released new Bing Map V8 Web control, Bing Maps Ajax Control V7 will no longer be supported after 30th of June 2017.

Since all current Bing maps web parts in Kentico (Basic Bing maps, Bing maps, Static Bing map) use Ajax Control V7, we released Kentico 10.0.27 hotfix, which adds support for the new control. For Kentico version 9 and older versions (8, 8.1, 8.2) it is necessary to copy attached files to your project and follow these steps:

  1. Backup your project files (or web parts only)
  2. Copy BasicBingV8Maps.cs file anywhere into the CMS folder and include it in the project CMSApp_AppCode (a web application project) or just copy it into the App_Code folder if you have a website project.
  3. Edit ~/CMSWebParts/Maps/Basic/BasicBingMaps.ascx.cs file:
  4. Add using CMS;
  5. Replace line private readonly BasicBingMaps BasicBingMaps = new BasicBingMaps(); with private readonly BasicBingV8Maps BasicBingMaps = new BasicBingV8Maps();
  6. Edit ~/CMSWebParts/Maps/Documents/BingMaps.ascx file:
  7. Add <%@ Register TagPrefix="cms" Namespace="CMS" Assembly="CMSAppAppCode" %> after @Control directive (for a web application project) or <%@ Register TagPrefix="cms" Namespace="CMS" %> (for a web site project)
  8. Change the line <cms:BasicBingMaps ID="ucBingMap" runat="server" /> to <cms:BasicBingV8Maps ID="ucBingMap" runat="server" />
  9. Edit ~/CMSWebParts/Maps/Static/StaticBingMaps.ascx.cs file:
  10. Add using CMS;
  11. Locate invocation of BasicBingMaps.RegisterMapScripts(...) method in OnPreRender method and replace BasicBingMaps with BasicBingV8Maps
  12. Locate invocation of BasicBingMaps.GenerateMap(...) method in LoadMap method and replace BasicBingMaps with BasicBingV8Maps
  13. Copy and replace the BingMaps.js file into folders ~/CMSWebParts/Maps/Static/StaticBingMaps_files, ~/CMSWebParts/Maps/Documents/BingMaps_files and ~/CMSWebParts/Maps/Basic/BasicBingMaps_files

As new V8 Web Control introduces several breaking changes, after applying the hotfix (or after completing mentioned instructions) there are some additional key notes to take into consideration:

keydown event on Map object was deprecated

Enable keyboard shortcuts property of the web part became unused. We recommend to remove the property from the web part definition to prevent confusion.

Properties height and width of InfoboxOptions object were deprecated.

Infobox in V8 grows to fit the content. This fact may cause design break so it is recommended to revise  the  transformations used for  the  Infobox  custom markup. The outer element in the transformation should declare its dimensions as absolute values. You may also set InfoboxOptions properties maxWidth and maxHeight to define maximal dimensions. To do so, edit the ~/CMSWebParts/Maps/*/(Static)BingMaps_files/BingMaps.js file and locate this code in the showInfo function:

var infoboxOptions = { title: pushpin.title, description: pushpin.description };

And add the maxWidth and maxHeight properties:

var infoboxOptions = { title: pushpin.title, description: pushpin.description, maxWidth: 350, maxHeight: 200 };

Additional action is required to force the custom pushpin to point at the correct place

When using custom ushpin icon (defined via Icon field property) it is necessary to edit BingMaps.js in the respective web part folder and locate this code in addBingMarker function:

if (iconURL) { var pushpinOptions = { icon: iconURL, textOffset: offset }; }

Add the anchor option with X and Y coordinates, which is used to specify what part of the image should be anchored to the location of the pushpin:

if (iconURL) { var pushpinOptions = { icon: iconURL, textOffset: offset, anchor: new Microsoft.Maps.Point(X, Y) }; }

You can find more information related to the migration between Ajax Control V7 and V8 here.

Share this article on   LinkedIn Google+

Lukáš Gancarčík

Support Specialist - Content Management