GeoMap not working inside update panel

Question

I am using geomap-linechart api in my application.. I want to view the map and the chart on a drop down selected index changed event.. It doesn't work if i put it inside update panel.. it becomes blank.. but it woks fine if i put the control outside the update panel.. Is there any reason or suggestion for this prob?? is it not possible to use the geomap inside update panel??

this is my code..

<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script src='http://maps.google.com/maps?file=api&v=2&key=ABCDEFG' type='text/javascript'></script>
<script type='text/javascript'>

google.load('visualization', '1', { 'packages': ['geomap'], 'language': 'fr'});        

    var countryCode;

// map function

    function DrawWorldMap(country, lat, lang, name, count, usercount, user, bandwidth, vtitle, htitle, title1, title2) {
        try {
            var data = new google.visualization.DataTable();
            data.addRows(count);
            data.addColumn('string', 'Country');
            data.addColumn('number', 'BandWidth');
            var contry = country.split(',');
            var band = bandwidth.split(',');

            for (var i = 0; i < count; i++) {
                data.setValue(i, 0, contry[i]);
            }
            for (var h = 0; h < count; h++) {
                data.setValue(h, 1, Number(band[h]));
            }
            var options = {};
            options['dataMode'] = 'regions';

            var container = document.getElementById('<%=map_canvas.ClientID%>');
            var geomap = new google.visualization.GeoMap(container);
            geomap.draw(data, options);
            var lati = lat;
            var langi = lang;
            var loop = count;
            google.visualization.events.addListener(
    geomap, 'regionClick', function (e) {
        countryCode = e['region'];
        CreateCountryMap(lati, langi, name, loop, usercount, country, user, bandwidth, vtitle, htitle, title1, title2);

    });

        }            
        catch (exception) {
            alert('drawworldmap: ' + exception);
        } 
        drawVisualization(user, bandwidth, usercount, vtitle, htitle, title1, title2); // here am calling the chart function..
    }

//chart function

   function drawVisualization(User, Bandwidth, counts, vtitle, htitle, title1, title2) {
        try {
            // Create and populate the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', title1);
            data.addColumn('number', title2);
            var username = User.split(',');
            var BandWidth = Bandwidth.split(',');
            for (var i = 0; i < counts; i++) {
                data.addRow([String(username[i]), Number(BandWidth[i])]);
            }

            // Create and draw the visualization.
            new google.visualization.LineChart(document.getElementById('<%=visualization.ClientID%>')).
        draw(data, { curveType: "function", pointSize: 5, title: 'User Chart', titlePosition: 'out',
            width: 400, height: 350, backgroundColor: 'AliceBlue',
            vAxis: { maxValue: 100, title: vtitle }, fontSize: 8, hAxis: { title: htitle }
        }
            );
        }
        catch (exception) {
            alert(exception);
        }
    }       

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<asp:DropDownList ID="ddlusername" runat="server" AutoPostBack="true" 
        OnSelectedIndexChanged="ddlusername_SelectedIndexChanged" Height="17px" 
        Width="132px">   </asp:DropDownList>    

<div id="visualization" align="center" style="border: thin solid grey;" runat="server"> </div>

<div id='map_canvas' style="border: thin solid grey;" align="center" runat="server"> </div>

<asp:Label ID="lblmap" runat="server"></asp:Label>

</ContentTemplate>
</asp:UpdatePanel>

and i'm calling the drawworldmap function from code behind like this..

   ScriptManager.RegisterStartupScript(lblmap, this.GetType(), "js2", "google.setOnLoadCallback(DrawWorldMap('" + contry + "','" + city + "','" + langitude + "','" + longitude + "'," + count + "," + usercount + ",'" + username + "','" + bandwidth + "','Bandwidth','UserName','User','BandWidth'));", true);

Pls help if you have any idea..

Thank you..

Answer 1

First solution is call function of load google map again, like initMap() function from javascript. second solution is make iframe page from map and load it when you click on div of map.

your problem is in update panel it is not loading properly.

so.When you click on div of map again load map by first solution. other wise use second soluction by loading iframe.

I have done both this thing in my projects.

Hope this will help you.

Answer 2

<script type="text/javascript">
      function ActiveTabChanged(sender, e) {
        if (sender.get_activeTab().get_headerText().toLowerCase().indexOf('contact') > -1) {
            var FrameSrc = ('<%=SetFrameSrc() %>');
            document.getElementById('<%=ifrmMap.ClientID %>').src = FrameSrc;
        }   
    }
</script>

<iframe id="ifrmMap" runat="server" height="324px" width="462px" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

At Code Behind

/// <summary>
        /// Get the iframe source when contact tab active.
        /// </summary>
        /// <returns></returns>
        public string SetFrameSrc()
        {
            string strSrc = string.Empty;
            if (!string.IsNullOrEmpty(queryID))
            {
                strSrc = //Add Google Map New page url;
            }
            return strSrc;
        }

When you select map from dropdown call this javascript function on selected indexchanged. put iframe where you put div of map right now. and put map functionality over to new page. which is loaded in this iframe.and last function is code behind function where you have to set your new page where you have write map code.