Asp.net Google Charts SSL handler for GeoMap

Question

Hi All,

I am trying to view Google charts in a site using SSL.

Google Charts do not support SSL so if we use the standard charts, we get warning messages.

My plan is to create a ASHX handler that is co9ntained in the secure site that will retrieve the content from Google and serve this to the page the user is viewing.

Using VS 2008 SP1 and the included web server, my idea works perfectly for both Firefox and IE 8 & 9(Preview) and I am able to see my geomap displayed on my page as it should be. But my problem is when I publish to IIS7 the page using my handler to generate the geomap works in Firefox but not IE(every version).

There are no errors anywhere or in any log files, but when i right click in IE in the area where the map should be displayed, I see the message in the context menu saying "movie not loaded"

Below is the code from my handler and the aspx page.

I have disabled compression in my web.config.

Even in IE I am hitting all my break points and when I use the IE9 Developer tools, the web page is correctly generated with all the correct code, url's and references.

If you have any better ways to accomplish this or how i can fix my problem, I will appreciate it.

Thanks

Ian

Handler(ASHX)

  public void ProcessRequest(HttpContext context)
    {
        String url = "http://charts.apis.google.com/jsapi";

        string query = context.Request.QueryString.ToString();
        if (!string.IsNullOrEmpty(query))
        {
            url = query;
        }

        HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(new Uri(HttpUtility.UrlDecode(url)));

        request.UserAgent = context.Request.UserAgent;
        WebResponse response = request.GetResponse();

        string PageContent = string.Empty;
        StreamReader Reader;

        Stream webStream = response.GetResponseStream();

        string contentType = response.ContentType;

        context.Response.BufferOutput = true;
        context.Response.ContentType = contentType;
        context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        context.Response.Cache.SetNoServerCaching();
        context.Response.Cache.SetMaxAge(System.TimeSpan.Zero);

                string newUrl = IanLearning.Properties.Settings.Default.HandlerURL; //"https://localhost:444/googlesecurecharts.ashx?";

        if (response.ContentType.Contains("javascript"))
        {
            Reader = new StreamReader(webStream);
            PageContent = Reader.ReadToEnd();

            PageContent = PageContent.Replace("http://", newUrl + "http://");
            PageContent = PageContent.Replace("charts.apis.google.com", newUrl + "charts.apis.google.com");
            PageContent = PageContent.Replace(newUrl + "http://maps.google.com/maps/api/", "http://maps.google.com/maps/api/");

            context.Response.Write(PageContent);
        }
        else
        {
            {
                byte[] bytes = ReadFully(webStream);
                context.Response.BinaryWrite(bytes);
            }
        }

        context.Response.Flush();
        response.Close();
        webStream.Close();
        context.Response.End();
        context.ApplicationInstance.CompleteRequest();
    }

ASPX Page

<%@ Page Title="" Language="C#" MasterPageFile="~/Site2.Master" AutoEventWireup="true"
    CodeBehind="googlechart.aspx.cs" Inherits="IanLearning.googlechart" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<script type='text/javascript' src='~/googlesecurecharts.ashx?'></script>
<script type='text/javascript'>
    google.load('visualization', '1', { 'packages': ['geomap'] });
    google.setOnLoadCallback(drawMap);

    var geomap;

    function drawMap() {
        var data = new google.visualization.DataTable();
        data.addRows(6);
        data.addColumn('string', 'City');
        data.addColumn('number', 'Sales');
        data.setValue(0, 0, 'ZA');
        data.setValue(0, 1, 200);
        data.setValue(1, 0, 'US');
        data.setValue(1, 1, 300);
        data.setValue(2, 0, 'BR');
        data.setValue(2, 1, 400);
        data.setValue(3, 0, 'CN');
        data.setValue(3, 1, 500);
        data.setValue(4, 0, 'IN');
        data.setValue(4, 1, 600);
        data.setValue(5, 0, 'ZW');
        data.setValue(5, 1, 700);

        var options = {};
        options['region'] = 'world';
        options['dataMode'] = 'regions';
        options['showZoomOut'] = false;

        var container = document.getElementById('map_canvas');
        geomap = new google.visualization.GeoMap(container);

        google.visualization.events.addListener(
        geomap, 'regionClick', function(e) {
            drillDown(e['region']);
        });

        geomap.draw(data, options);
    };

    function drillDown(regionData) {
      alert(regionData);
    }
</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id='map_canvas'>
    </div>
</asp:Content>