Incompatible with ComponentArt?

Jun 20, 2010 at 1:05 PM

Hi there,

I've been using and loving this control for some time now, but have encountered an issue when using it alongside a third party UI suite called ComponentArt.  Simply put, the map just doesn't render when I have it on the same page as any ComponentArt control, but as soon as I take the ComponentArt control away the map renders fine.

Can anyone with more Javascript experience than me point out why it happens based on the page sources below, and better still can anyone tell me what to do to fix it please??

Many thanks

 

To bring this to the simplest level I used a sample from a recent post by Velio, but have also tested this with/without master page and with/without dynamic creation of map control - the situation is always the same.  With ComponentArt control, no map is displayed - without ComponentArt control, map displays fine.  ps Map key is correct in application, just changed to 'xxxx' below for privacy!

WITH COMPONENTART CONTROL (Menu control in Master Page) - Map does not display

Aspx page:

<%@ Page Title="MapTest" Language="C#" MasterPageFile="~/MasterWithMenu.master" AutoEventWireup="true" CodeFile="MapTest.aspx.cs" Inherits="MapTest" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" Runat="Server">
    <asp:PlaceHolder ID="phMap" runat="server" />
</asp:Content>

Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;

public partial class map_Dynamic : System.Web.UI.Page {

    #region Methods ///////////////////////////////////////////////////////////////////////////

    /// <summary>
    /// Handles the Load event of the Page control.
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
    protected void Page_Load(object sender, EventArgs e) {

        string key = ConfigurationManager.AppSettings["GoogleMapKey"];
        double latitude = 42.1229;
        double longitude = 24.7879;

        Artem.Web.UI.Controls.GoogleMap map = new Artem.Web.UI.Controls.GoogleMap();
        map.ID = "googleMap";
        map.Key = key;
        map.Latitude = latitude;
        map.Longitude = longitude;
        map.Height = new Unit("250px");
        map.Width = new Unit("250px");
        map.Zoom = 9;
        phMap.Controls.Add(map);
    } 
    #endregion
}

Rendered HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
	MapTest
</title><link href="Styles/MasterStyles.css" rel="stylesheet" type="text/css" /></head>
<body>
    <form name="aspnetForm" method="post" action="MapTest.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTMxNjc3NTM3NQ9kFgJmD2QWAgIDD2QWBAIBDw8WAh4HVmlzaWJsZWdkZAIFDw8WAh4PRW5hYmxlVmlld1N0YXRlZ2RkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYCBRVjdGwwMCRidG5Mb2dvdXQkY3RsMDEFFWN0bDAwJGJ0bkxvZ291dCRjdGwwM4PdScBo13wF8yS940PpJ+ErLLei" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>

</script>



<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=xxxx" type="text/javascript"></script>
<script src="/WebResource.axd?d=cpazRgPg-NdPS9r5t7DD6YCQt5veZFvj-g5MukXuBGkkWltbz0Xx3Ct0K54pe6MIWlPAf15lcvyeeNkA7iIY7Gsp_DRsqhMKRpJrI5Wl2101&amp;t=633946566700000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
Artem.Web.GoogleManager.save();
return true;
}
//]]>
</script>

<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKticvRBQKMj/Z0ApigjeoLesAKyCuuBXRoR1Wx5GeRDJaSDSM=" />
</div>
        <div id="container">

            <div id="logo-container">
                <div id="ctl00_pnlLoggedIn" class="UserInfoContainer">
	
                    Logged in as: 
                    <br />
                    <a id="ctl00_btnChangePassword" href="javascript:__doPostBack('ctl00$btnChangePassword','')">Change Password</a>
                    <span id="ctl00_lblButtonDivider" class="LoginDivider" style="display:inline-block;width:15px;"></span>
                    <a id="ctl00_btnLogout" href="javascript:__doPostBack('ctl00$btnLogout$ctl02','')">Login</a>
                

</div>
                
            </div>
            <div id="menu-container">
                <script src="/WebResource.axd?d=DKVmh8O8B3zb74530KDNxo0DWewEwhwi7EbvvYJ_wXnf9Z9EDczpAkz77zPdqHFQu6015b8joOFlG7-xKeHPVM_1SPrAaUOkbHglKP1BsKM1&amp;t=633951887320000000" type="text/javascript"></script><script src="/WebResource.axd?d=DKVmh8O8B3zb74530KDNxo0DWewEwhwi7EbvvYJ_wXnf9Z9EDczpAkz77zPdqHFQvUYYAAi2Z_PzLCG6MWrInYaUlcdz3jusuxM1Yl06uuc1&amp;t=633951887320000000" type="text/javascript"></script><script src="/WebResource.axd?d=DKVmh8O8B3zb74530KDNxo0DWewEwhwi7EbvvYJ_wXnf9Z9EDczpAkz77zPdqHFQ_JBnn9peQMiCIPlM3nmjMdHfUOwSr8scoYk0FklfKIg1&amp;t=633951887320000000" type="text/javascript"></script><script src="/WebResource.axd?d=DKVmh8O8B3zb74530KDNxo0DWewEwhwi7EbvvYJ_wXm2NGBy731ifMkLgsc7BrWEDq16gTFofb_AbyJEHRKEiYEHWb9yCTi2fyqXaL77dfc1&amp;t=633951887320000000" type="text/javascript"></script><script src="/WebResource.axd?d=DKVmh8O8B3zb74530KDNxo0DWewEwhwi7EbvvYJ_wXm2NGBy731ifMkLgsc7BrWEDq16gTFofb_AbyJEHRKEiXFSphpuiSfX0FN0MkW8Qcc1&amp;t=633951887320000000" type="text/javascript"></script><script src="/WebResource.axd?d=DKVmh8O8B3zb74530KDNxo0DWewEwhwi7EbvvYJ_wXm2NGBy731ifMkLgsc7BrWEDq16gTFofb_AbyJEHRKEiXqVD2sR5LpW1DEWmZ84e1c1&amp;t=633951887320000000" type="text/javascript"></script><script type="text/javascript">
//<![CDATA[
/*** ComponentArt Web.UI client-side storage for ctl00_menuMain ***/
window.ComponentArt_Storage_ctl00_menuMain=[['p0',-1,[],[[30,'Home'],[17,'/Default.aspx'],[40,'TopItemLook']]],['p1',-1,[],[[30,'Login'],[17,'/Login/Login.aspx'],[40,'TopItemLook']]],['p2',-1,[],[[30,'New Candidate'],[17,'/Login/NewCandidate.aspx'],[40,'TopItemLook']]],['p3',-1,[],[[30,'New Employer'],[17,'/Login/NewEmployer.aspx'],[40,'TopItemLook']]]];
window.ComponentArt_ItemLooks_ctl00_menuMain=[[0,'TopItemLook',1,'TopMenuItem',2,'TopMenuItemHover',5,4,6,15,7,15,8,4,27,0,28,0],[0,'DefaultItemLook',1,'MenuItem',2,'MenuItemHover',5,4,6,18,7,12,8,3,10,'MenuItemHover',27,0,28,0],[0,'BreakItem',1,'MenuBreak',3,2,4,'100%',23,'break.gif',27,0,28,0]];
window.ComponentArt_ScrollLooks_ctl00_menuMain=[[0,'DefaultItemLook'],[0,'DefaultItemLook']];

//]]>
</script>
<div id="ctl00_menuMain"></div><input id="ctl00_menuMain_Data" name="ctl00_menuMain_Data" type="hidden" /><input id="ctl00_menuMain_Properties" name="ctl00_menuMain_Properties" type="hidden" /><input id="ctl00_menuMain_CheckedItems" name="ctl00_menuMain_CheckedItems" type="hidden" value="" /><input id="ctl00_menuMain_ContextData" name="ctl00_menuMain_ContextData" type="hidden" /><script type="text/javascript">
//<![CDATA[
/*** ComponentArt_Menu_Startup_ctl00_menuMain 2009_3_1762_35 ***/
window.ComponentArt_Init_ctl00_menuMain = function() {
if (!(window.cart_menu_kernel_loaded && window.cart_menu_support_loaded))
{
	setTimeout('ComponentArt_Init_ctl00_menuMain()', 500);
	return;
}
if (!(window.cart_menu_documentmousedownhandled))
{
ComponentArt_AddEventHandler(document,'mousedown',function(event){ComponentArt_Menu_DocumentMouseDown(event);});
window.cart_menu_documentmousedownhandled = true;
}
window.ctl00_menuMain = new ComponentArt_Menu('ctl00_menuMain',ComponentArt_Storage_ctl00_menuMain,ComponentArt_ItemLooks_ctl00_menuMain,ComponentArt_ScrollLooks_ctl00_menuMain,null,false);
ctl00_menuMain.Postback = function() { __doPostBack('ctl00$menuMain','') };
if(!window['menuMain']) { window['menuMain'] = window.ctl00_menuMain; ctl00_menuMain.GlobalAlias = 'menuMain'; }
ctl00_menuMain.PropertyStorageArray = [
['ApplicationPath',''],['AutoPostBackOnSelect',false],['AutoPostBackOnCheckChanged',false],['BaseUrl',''],['CascadeCollapse',true],['ClientEvents',null],['ClientSideOnContextMenuHide',null],['ClientSideOnContextMenuShow',null],['ClientSideOnItemMouseOut',null],['ClientSideOnItemMouseOver',null],['ClientSideOnItemSelect',null],['ClientTemplates',[]],['CollapseDelay',500],['CollapseDuration',400],['CollapseSlide',2],['CollapseTransition',20],['CollapseTransitionCustomFilter',null],['ContextControlId',null],['ContextData',null],['ContextMenu',0],['ControlId','ctl00$menuMain'],['CssClass','TopGroup'],['DefaultChildSelectedItemLookId',''],['DefaultDisabledItemLookId',''],['DefaultGroupCssClass','MenuGroup'],['DefaultGroupExpandDirection',0],['DefaultGroupExpandOffsetX',0],['DefaultGroupExpandOffsetY',4],['DefaultGroupHeight',null],['DefaultGroupItemSpacing',2],['DefaultGroupOrientation',0],['DefaultGroupWidth',null],['DefaultItemLookId','DefaultItemLook'],['DefaultItemTextAlign',0],['DefaultItemTextWrap',false],['DefaultSelectedItemLookId',''],['DefaultTarget',''],['ExpandDelay',100],['ExpandDisabledItems',true],['ExpandDuration',400],['ExpandedOverridesHover',false],['ExpandOnClick',false],['ExpandSlide',2],['ExpandTransition',21],['ExpandTransitionCustomFilter',null],['ForceHighlightedItemID',''],['Height',null],['HideSelectElements',true],['HighlightExpandedPath',true],['ImagesBaseUrl','Images/Menu/'],['MultiPageId',null],['Orientation',1],['OverlayWindowedElements',true],['PopUpZIndexBase',999],['PlaceHolderId','ctl00_menuMain'],['ScrollingEnabled',false],['SelectedItemPostBackID',null],['ShadowColor','#8D8F95'],['ShadowEnabled',true],['ShadowOffset',2],['SoaService',''],['TopGroupExpandDirection',0],['TopGroupExpandOffsetX',0],['TopGroupExpandOffsetY',4],['TopGroupItemSpacing',2],['WebService',''],['WebServiceCustomParameter',''],['WebServiceMethod',''],['TopGroupExpandOffsetY',4],['Width',null]
];
ctl00_menuMain.LoadProperties();
ComponentArt_Menu_MarkSelectedItem(ctl00_menuMain);
ComponentArt_Menu_MarkForceHighlightedItem(ctl00_menuMain);
ComponentArt_ClientStateControls[ComponentArt_ClientStateControls.length] = ctl00_menuMain;
ctl00_menuMain.Initialize();
ComponentArt_Menu_RenderMenu(ctl00_menuMain);
ComponentArt_Menu_InitKeyboard(ctl00_menuMain);
window.ctl00_menuMain_loaded = true;
}
ComponentArt_Init_ctl00_menuMain();
//]]>
</script>

            </div>
            <div id="maincontent-container">
                
    <div id="ctl00_MainContentPlaceHolder_googleMap" style="height:250px;width:250px;">

</div><div id="ctl00_MainContentPlaceHolder_googleMap_Templates" style="display:none;"></div><input id="ctl00_MainContentPlaceHolder_googleMap_State" name="ctl00_MainContentPlaceHolder_googleMap_State" type="hidden" />

           </div>
            <div id="footer-container">
                &copy;2010 TBC
            </div>
        </div>

    

<script type="text/javascript">
//<![CDATA[
var googleMap = new Artem.Web.GoogleMap({"Address":null,"BaseCountryCode":null,"ClientID":"ctl00_MainContentPlaceHolder_googleMap","ClientMapID":"googleMap","DefaultAddress":null,"DefaultMapView":0,"Directions":[],"EnableContinuousZoom":false,"EnableDoubleClickZoom":false,"EnableDragging":true,"EnableGoogleBar":false,"EnableInfoWindow":true,"EnableMarkerManager":false,"EnableReverseGeocoding":false,"EnableScrollWheelZoom":false,"EnterpriseKey":null,"Height":"250px","IsStreetView":false,"IsStatic":false,"Key":"xxxx","Latitude":42.1229,"Longitude":24.7879,"MapEvents":{},"MarkerEvents":{},"MarkerManagerOptions":{"borderPadding":null,"maxZoom":null,"trackMarkers":null},"PolygonEvents":{},"PolylineEvents":{},"ShowMapTypeControl":true,"ShowScaleControl":false,"ShowTraffic":false,"StreetViewMode":0,"StreetViewPanoID":null,"Width":"250px","Zoom":9,"ZoomPanType":0});
googleMap.load();
//]]>
</script>
</form>
</body>
</html>

WITHOUT COMPONENTART CONTROL - Map displays fine

Aspx Page:

<%@ Page Title="MapTest" Language="C#" MasterPageFile="~/MasterWithOutMenu.master" AutoEventWireup="true" CodeFile="MapTest.aspx.cs" Inherits="MapTest" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" Runat="Server">
    <asp:PlaceHolder ID="phMap" runat="server" />
</asp:Content>

Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;

public partial class map_Dynamic : System.Web.UI.Page {

    #region Methods ///////////////////////////////////////////////////////////////////////////

    /// <summary>
    /// Handles the Load event of the Page control.
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
    protected void Page_Load(object sender, EventArgs e) {

        string key = ConfigurationManager.AppSettings["GoogleMapKey"];
        double latitude = 42.1229;
        double longitude = 24.7879;

        Artem.Web.UI.Controls.GoogleMap map = new Artem.Web.UI.Controls.GoogleMap();
        map.ID = "googleMap";
        map.Key = key;
        map.Latitude = latitude;
        map.Longitude = longitude;
        map.Height = new Unit("250px");
        map.Width = new Unit("250px");
        map.Zoom = 9;
        phMap.Controls.Add(map);
    } 
    #endregion
}

Rendered HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1"><title>
	MapTest
</title><link href="Styles/MasterStyles.css" rel="stylesheet" type="text/css" /></head>
<body>
    <form name="aspnetForm" method="post" action="MapTest.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTMxNjc3NTM3NQ9kFgJmD2QWAgIDD2QWAgIBDw8WAh4HVmlzaWJsZWdkZBgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAgUVY3RsMDAkYnRuTG9nb3V0JGN0bDAxBRVjdGwwMCRidG5Mb2dvdXQkY3RsMDP/VCnAxcDZ5dFdVwJtfywAzqk5hw==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>

</script>



<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=xxxx" type="text/javascript"></script>
<script src="/WebResource.axd?d=cpazRgPg-NdPS9r5t7DD6YCQt5veZFvj-g5MukXuBGkkWltbz0Xx3Ct0K54pe6MIWlPAf15lcvyeeNkA7iIY7Gsp_DRsqhMKRpJrI5Wl2101&amp;t=633946566700000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
Artem.Web.GoogleManager.save();
return true;
}
//]]>
</script>

<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLA+OruCwKMj/Z0ApigjeoL8iE4AwtcdgA2y+occuVMAv4Opxk=" />
</div>
        <div id="container">

            <div id="logo-container">
                <div id="ctl00_pnlLoggedIn" class="UserInfoContainer">
	
                    Logged in as: 
                    <br />
                    <a id="ctl00_btnChangePassword" href="javascript:__doPostBack('ctl00$btnChangePassword','')">Change Password</a>
                    <span id="ctl00_lblButtonDivider" class="LoginDivider" style="display:inline-block;width:15px;"></span>
                    <a id="ctl00_btnLogout" href="javascript:__doPostBack('ctl00$btnLogout$ctl02','')">Login</a>
                

</div>
                
            </div>
            <div id="menu-container">
            </div>
            <div id="maincontent-container">
                
    <div id="ctl00_MainContentPlaceHolder_googleMap" style="height:250px;width:250px;">

</div><div id="ctl00_MainContentPlaceHolder_googleMap_Templates" style="display:none;"></div><input id="ctl00_MainContentPlaceHolder_googleMap_State" name="ctl00_MainContentPlaceHolder_googleMap_State" type="hidden" />

           </div>
            <div id="footer-container">

                &copy;2010 TBC
            </div>
        </div>
    

<script type="text/javascript">
//<![CDATA[
var googleMap = new Artem.Web.GoogleMap({"Address":null,"BaseCountryCode":null,"ClientID":"ctl00_MainContentPlaceHolder_googleMap","ClientMapID":"googleMap","DefaultAddress":null,"DefaultMapView":0,"Directions":[],"EnableContinuousZoom":false,"EnableDoubleClickZoom":false,"EnableDragging":true,"EnableGoogleBar":false,"EnableInfoWindow":true,"EnableMarkerManager":false,"EnableReverseGeocoding":false,"EnableScrollWheelZoom":false,"EnterpriseKey":null,"Height":"250px","IsStreetView":false,"IsStatic":false,"Key":"xxxx","Latitude":42.1229,"Longitude":24.7879,"MapEvents":{},"MarkerEvents":{},"MarkerManagerOptions":{"borderPadding":null,"maxZoom":null,"trackMarkers":null},"PolygonEvents":{},"PolylineEvents":{},"ShowMapTypeControl":true,"ShowScaleControl":false,"ShowTraffic":false,"StreetViewMode":0,"StreetViewPanoID":null,"Width":"250px","Zoom":9,"ZoomPanType":0});
googleMap.load();
//]]>
</script>
</form>
</body>
</html>

Sep 24, 2012 at 4:03 PM
Edited Oct 2, 2012 at 1:28 PM

I encountered the same problem as described above. The problem only occurs when using older ComponentArt versions (ex. 2006).