Why the geomap not working inside updatepanel?

[LeemaRose]

Hi,

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??

Pls help if you have any idea..

Thank you..

[acoder]

From the terminology you're using, it seems you're using ASP.NET. Is that correct?

[LeemaRose]

s u r correct am using asp.net and javascript for creating the map and the chart..

[acoder]

Can you post some code or perhaps a link to a test page.

[LeemaRose]

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..