DIY Map & IE error after refresh

Recently I have been working on our department public website and need an interactive US state map for different social indicators in 50 states. I found a great and free mapping control called DIY map online. Here is the website: http://www.backspace.com/
It's written in flash and really lightweight. It can be controlled by javascript functions on the HTML page.


I tested the following US albers map on IE but found a little bug:
http://backspace.com/mapapp/us_albers/index.html
The map loaded correctly for the first time, but when I refreshed (F5) the page, the map is gone. I tested it on IE6 and IE7 and found the same bug. But the same page worked fine and had no problems in firefox and chrome.

I also found that this page has no refresh problem in IE:
http://backspace.com/mapapp/us/with_javascript/sample_with_javascript.html

I noticed that the one that has error used swfobject for the us_albers map and I believed
this caused the problem in IE. Here is the original code:

<script type="text/javascript" src="swfobject.js"></script> 
    <script type="text/javascript"> 
        //swfobject.registerObject("DIYMap", "10.0.0");
        var flashvars = {
          data_file: "senate.xml",
          use_js: "on"
        };
        var params = {
          allowscriptaccess: "always"
        };
        swfobject.embedSWF("us_albers.swf", "map", "600", "400", "9.0.0", "expressInstall.swf", flashvars, params);
</script> 


<div id="map"> 
   <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> 
</div> 

So I changed the swfObject calling function to "Static publishing" as described from this page: http://learnswfobject.com/the-basics/
It seemed that "Static publishing" fixed the problem. 




<div id="mapDiv">
            <object id="map"

             classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

             width="580px"

             height="410px">

            <param name="movie" value="<%=GetFlashLink() %>" />

          <!--[if !IE]>-->

          <object type="application/x-shockwave-flash"

                  data="<%=GetFlashLink() %>" 

                  width="580px" 

                  height="410px">

          <!--<![endif]-->

            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

          <!--[if !IE]>-->

          </object>

          <!--<![endif]--> 

        </object>

        </div>

<script type=text/javascript>

        function RegisterFlash() {

            swfobject.registerObject("map", "9");

        }

        //this is to fix the IE7 asp.net error

        window.map = window.document['map'];

        RegisterFlash();    

</script>


Another solution would be appending a javascript timestamp to the embed string. This way IE6 and 7 think the data file is a new one and will try to reload every time. Here is a sample codes from this link (http://blogs.popart.com/2007/11/flash-externalinterface-in-asp-net-applications/)



 var localplayer= ‘player.swf?guid=’ + Math.random()*99999999;
 var so = new SWFObject(localplaer, “player”, …);


Happy programming~