How to use Google or Bing maps in ASPX templates

   —   
This article describes how to configure Google and Bing maps web part in ASPX templates.
Here are some examples oh how to connect a basic bing maps control / web part to datasource web part / control. The same approach can be used for google maps (you can use a basic google maps control / web part). You can use the following methods:


A:

Basic Bing WEBPART + Documents data source CONTROL case1 (better performance, faster):

<%@ Register Src="~/CMSWebParts/Maps/Basic/BasicBingMaps.ascx" TagName="BasicBingMaps" TagPrefix="cms" %>

<cms:CMSDocumentsDataSource runat="server" ID="DocumentsDataSource" Path="/%" ClassNames="cms.office" />

<cms:BasicBingMaps runat="server" ID="BingMapsBasic" TransformationName="CMS.Office.Simple"
Scale="2" ZoomScale="5" Latitude="51" Longitude="-30" LatitudeField="OfficeLatitude" LongitudeField="OfficeLongitude"
ToolTipField="OfficeName" MapType="Road" NavigationControlType="0" />

protected override void OnInit(EventArgs e)
{
  this.BingMapsBasic.DataSourceControl = this.DocumentsDataSource;
  this.BingMapsBasic.ReloadData();
}


B:

Basic Bing WEBPART + Documents data source CONTROL case2 (slower, needs to find the data source control on page):

<%@ Register Src="~/CMSWebParts/Maps/Basic/BasicBingMaps.ascx" TagName="BasicBingMaps" TagPrefix="cms" %>

<cms:CMSDocumentsDataSource runat="server" ID="DocumentsDataSource" Path="/%" ClassNames="cms.office" />
<cms:BasicBingMaps runat="server" DataSourceName="DocumentsDataSource" ID="BingMapsBasic" TransformationName="CMS.Office.Simple"
Scale="2" ZoomScale="5" Latitude="51" Longitude="-30" LatitudeField="OfficeLatitude" LongitudeField="OfficeLongitude"
ToolTipField="OfficeName" MapType="Road" NavigationControlType="0" />


C:

Basic Bing WEBPART + Documents data source WEBPART case1 (better performance, faster):

<%@ Register Src="~/CMSWebParts/Maps/Basic/BasicBingMaps.ascx" TagName="BasicBingMaps" TagPrefix="cms" %>
<%@ Register Src="~/CMSWebParts/DataSources/DocumentsDataSource.ascx" TagName="DocumentsDataSource" TagPrefix="cms" %>

<cms:DocumentsDataSource ID="DocumentsDataSource" runat="server" Path="/%" ClassNames="cms.office" />

<cms:BasicBingMaps runat="server" ID="BingMapsBasic" TransformationName="CMS.Office.Simple"
Scale="2" ZoomScale="5" Latitude="51" Longitude="-30" LatitudeField="OfficeLatitude" LongitudeField="OfficeLongitude"
ToolTipField="OfficeName" MapType="Road" NavigationControlType="0" />

protected override void OnInit(EventArgs e)
{
this.BingMapsBasic.DataSourceName = this.DocumentsDataSource.ClientID;
this.BingMapsBasic.ReloadData();
}

 
D:

Basic Bing WEBPART + Documents data source WEBPART case2 (slower, needs to find the data source control on page):

<%@ Register Src="~/CMSWebParts/Maps/Basic/BasicBingMaps.ascx" TagName="BasicBingMaps" TagPrefix="cms" %>
<%@ Register Src="~/CMSWebParts/DataSources/DocumentsDataSource.ascx" TagName="DocumentsDataSource" TagPrefix="cms" %>

<cms:DocumentsDataSource ID="DocumentsDataSource" runat="server" Path="/%" ClassNames="cms.office" />

<cms:BasicBingMaps runat="server" DataSourceName="DocumentsDataSource" ID="BingMapsBasic" TransformationName="CMS.Office.Simple"
Scale="2" ZoomScale="5" Latitude="51" Longitude="-30" LatitudeField="OfficeLatitude" LongitudeField="OfficeLongitude"
ToolTipField="OfficeName" MapType="Road" NavigationControlType="0" />


E:

Basic Bing CONTROL + Documents data source CONTROL:
<cms:CMSDocumentsDataSource runat="server" ID="DocumentsDataSource" Path="/%" ClassNames="cms.office" />
<cms:BasicBingMaps runat="server" ID="BingMapsBasic" />

protected override void OnInit(EventArgs e)
{
CMSMapProperties mp = new CMSMapProperties();
mp.LatitudeField = "OfficeLatitude";
mp.LongitudeField = "OfficeLongitude";
mp.Latitude = 0;
mp.Longitude = 0;
mp.MapId = this.BingMapsBasic.ClientID;
//mp.<PROPERTY> ....... etc.

this.BingMapsBasic.MapProperties = mp;
this.BingMapsBasic.MainScriptPath = "~/CMSWebParts/Maps/Basic/BasicBingMaps_files/BingMaps.js";
this.BingMapsBasic.DataSource = this.DocumentsDataSource.DataSource;
this.BingMapsBasic.ItemTemplate = CMSDataProperties.LoadTransformation(this, "cms.office.preview", false);
this.BingMapsBasic.DataBind();
}

Here is working example for Google maps:

<%@ Register Src="~/CMSWebParts/Maps/Basic/BasicGoogleMaps.ascx" TagName="BasicGoogleMaps" TagPrefix="cms" %>

<cms:CMSDocumentsDataSource runat="server" ID="DocumentsDataSource" Path="/%" ClassNames="cms.office" />

<cms:BasicGoogleMaps runat="server" ID="GoogleBasicMapS" TransformationName="CMS.Office.Simple"
Scale="2" ZoomScale="5" Latitude="51" Longitude="-30" LatitudeField="OfficeLatitude" LongitudeField="OfficeLongitude"
ToolTipField="OfficeName" />

protected override void OnInit(EventArgs e)
{
  this.GoogleBasicMapS.DataSourceControl = this.DocumentsDataSource;
  this.GoogleBasicMapS.ReloadData();
}


Be aware that a property called with the value Road, i.e.  MapType="Road" works only for Bing maps. Google Maps can have the following values in this property:

/// <summary>
/// Gets or sets the initial map type.
/// ROADMAP - This map type displays a normal street map.
/// SATELLITE - This map type displays a transparent layer of major streets on satellite images.
/// HYBRID - This map type displays a transparent layer of major streets on satellite images.
/// TERRAIN - This map type displays maps with physical features such as terrain and vegetation.
/// </summary>
public string MapType
{
get
{
return ValidationHelper..GetString(this.GetValue("MapType"), "ROADMAP");
}
set
{
this.SetValue("MapType", value);
}
}


The above code is taken from the ~/CMSWebParts/Maps/Basic/BasicGoogleMaps.ascx.cs file.

Individual properties for Google Maps web part are described in the web part guide: http://devnet.kentico.com/docs/webparts/index.html

In Kentico CMS 6.0 there are the following data source controls:
  • AttachmentsDataSource
  • CMSQueryDataSource
  • CustomTableDataSource
  • CMSDocumentsDataSource
  • FileSystemDataSource
  • SQLDataSource
  • UsersDataSource
  • WebServiceDataSource
  • XMLDataSource
They are located in the CMS.Controls namespace. Please refer to our API reference.

The purpose of each control should be self-explanatory based on its name. Each control is used by some of the built-in web parts. Here is the documentation describing all web parts and their properties: Web parts documentation.

If you don't think that any of the above would be suitable for your scenario, you could still develop your own custom one, according to the documentation: Developing DataSource web parts.

P.S. Bing maps require a key, so you need to sign in for a developer account as per the instructions that you can see on your Bing map.
-it-


See also: GEO mapping

Applies to: Kentico CMS 6.0
Share this article on   LinkedIn

Kentico Support Engineer