Issue with multiple GoogleMap HTMLPlaceholder and RadWindow

[Pierre]

Hello, here my problem.

First i Have a page that contain an HTMLPlaceHolder. This HTMLPlaceHolder host a GoogleMap HTMLPage that can be piloted without any problem with javascript code called from SIlverlight. See above :

My HTMLPlaceHolder :

<telerik:RadHtmlPlaceholder  UrlLoaded="HtmlPh_GoogleMap_UrlLoaded" Name="HtmlPh_GoogleMap" SourceUrl="HtmlFiles/GoogleMap.html" VerticalAlignment="Stretch" />

Silverlight Button Click event :

private void Bt_Zoom_Click(object sender, RoutedEventArgs e)
       {
           JavascriptGoogleMapHelper.CallJavascriptFunction(HtmlPh_GoogleMapFromChildWindows, "Zoom", new string[] { "48.08", "-0.75" });
       }

the CallJavascriptFunction :

public static void CallJavascriptFunction(RadHtmlPlaceholder _HtmlPh_GoogleMap, string _functionName, string[] _parameters)
        {
            // Get the IFrame from the HtmlPresenter
            HtmlElement iframe = (HtmlElement)_HtmlPh_GoogleMap.HtmlPresenter.Children[0];
            // Set an ID to the IFrame so that can be used later when calling the javascript
            iframe.SetAttribute("id", "myIFrame");

            string code = "";

            if (_parameters != null)
            {
                // Code to be executed
                code = "document.getElementById('myIFrame').contentWindow." + _functionName + "(";

                for (int i = 0; i < _parameters.Length; i++)
                {
                    code += _parameters[i] + ",";
                }
                code = code.Substring(0, code.Length - 1);
                code += ");";
            }
            else
            {
                // Code to be executed
                code = "document.getElementById('myIFrame').contentWindow." + _functionName + "();";
            }
            try
            {
                HtmlPage.Window.Eval(code);
            }
            catch (Exception ex)
            {
                ErrorChildWindow _errorWindow = new ErrorChildWindow("Code : " + code + "execption : "+ ex.Message.ToString(), true, 1);
            }
      }

the javascript function :

function Zoom(_lat, _lng) {
    map.setCenter(new google.maps.LatLng(_lat, _lng));
    map.setZoom(17);
    alert('Zoomed from Child');
}

This code just work perfectly, but now i need to host a second GoogleMapPage in a radWindows on this same page. So I just repeat my code and the GoogleMap seems to load properly. I set a different HTMLpage to load in the second HTMLPlaceHolder (like this)

<telerik:RadHtmlPlaceholder UrlLoaded="HtmlPh_GoogleMap_UrlLoaded" Name="HtmlPh_GoogleMapFromChildWindows" SourceUrl="HtmlFiles/GoogleMapChildWindows.html" />

But when i'm calling my CallJavascriptFunction, the javascript code is always executed on the first map, not on this in the RadWindow. I tried to create two différent javascipt file (one for each htmlPage) but nothing change, can't call javascript code that is hosted in my second HTMLPlaceHolder :/

Any Idea ??

Thx a lot !

[Hristo]

Hi,

Looking at your code I have noticed that you are setting the string "myIFrame" for IFrame id. Calling the same function for different maps sets the same id to the iFrame(s). Thus, I could conclude that calling "document.getElementById('myIFrame')" always returns the first iFrame. Having that in mind, makes sens that function call is always directed to the first map zoom.

Regards,
Hristo
the Telerik team

[Pierre]

Thx a lot, i add a parameter to set a different MyIFrame for each map and that did the trick. Dunno why i didn't try this before :(

Good job as always Telerik, thx again Hristo !!