Hi guys

I am using the jquery google map plugin with filtering: http://jquery-ui-map.googlecode.com/...filtering.html and it is working great in all browsers with the exception of IE 8 and below. In IE8 and below it doesn't seem to build the checkbox filtering options and it just shows a blank small box, see image. map_ie8.jpg


I have no idea why it isn't showing the checkboxes in IE8 and below and have spent hours trying to figure out the problem, I have a feeling it will be something stupid e.g. something not supported in IE8 but I'm not getting any errors in the error console. I have posted my code below, any help would be greatly appreciated. Thanks

HTML Code
Code:
<div id="map_canvas" class="map"></div>
				

                <div id="dropdown" class="white_box">
                    <asp:DropDownList ID="ddl_location" AutoPostBack="true" runat="server">
                    <asp:ListItem Value="0">Northern Ireland</asp:ListItem>
                    <asp:ListItem Value="1">RoI</asp:ListItem>   
                    <asp:ListItem Value="2">GB</asp:ListItem>                              
                    </asp:DropDownList>
                </div>

				<div id="radios" class="white_box"></div>
Javascript

Code:
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
		<script type="text/javascript" src="/scripts/demo.js"></script>
		<script type="text/javascript" src="/scripts/jquery.ui.map.js"></script>

               <script type="text/javascript">

		    $(function () 

            {

                  {

                   
		    $('#map_canvas').gmap('addControl', 'radios', google.maps.ControlPosition.TOP_LEFT);
                    $('#map_canvas').gmap('addControl', 'dropdown', google.maps.ControlPosition.TOP_RIGHT);
                    $('#map_canvas').gmap('option', 'zoomControl', true);
                    $('#map_canvas').gmap('option', 'streetViewControl', true);
                  

		            var images = ['/images/rapid.png', '/images/rapid-cs.png', 'images/oos.png', '/images/fast.png', '/images/fast-cs.png', 'images/oos.png', '/images/rapid.png', '/images/fast.png', '/images/standard.png', '/images/standard-cs.png'];
		            var tags = ['NI Rapid (Operational)', 'NI Rapid (Coming Soon)', 'NI Rapid (Out of Service)', 'NI Fast (Operational)', 'NI Fast (Coming Soon)', 'NI Fast (Out of Service)', 'RoI Rapid *', 'RoI Fast *', 'GB Rapid (Operational)', 'GB Rapid (Planned)', 'GB Fast (Operational)', 'GB Fast (Coming Soon)', 'GB Standard(Operational)', 'GB Standard(Coming Soon)', 'GB Out of Service'];
                    var group = ['NI', 'NI', 'NI', 'NI', 'NI', 'NI', 'RoI', 'RoI', 'UK', 'UK', 'UK', 'UK', 'UK', 'UK', 'UK',];
		            
                    <%=sb.tostring%> // what this does is loops through a database table in the code behind to build up the markers
                    
                    $.each(tags, function (i, tag) 
                     {
                        var checkROI = '';
                        var checkNI = '';
           
                        $('#radios').append(('<label class="' + group[i] + '" style="margin-right:5px;display:block;"><input type="checkbox" style="margin-right:5px" value="{0}" class="' + group[i] + '">"' + tags[i] + '"</label>').format(tag, tag));

                        <%If ddl_location.SelectedValue = "0" Then %>
                            $('.NI').attr('checked','checked');
                            $('.RoI').removeAttr('checked');
                            $('.RoI').hide();
                            $('.UK').removeAttr('checked');
                            $('.UK').hide();
                  
                        <%Else If ddl_location.SelectedValue = "2" Then %>
                            $('.UK').attr('checked','checked');
                            $('.RoI').removeAttr('checked');
                            $('.RoI').hide();
                            $('.NI').removeAttr('checked');
                            $('.NI').hide();
                        <%Else%>
                            $('.RoI').attr('checked','checked');
                            $('.NI').removeAttr('checked');
                            $('.NI').hide();
                            $('.UK').removeAttr('checked');
                            $('.UK').hide();
                        <%End If %>

		                
		            });

                      showHideMarker();
                      
        
		            $('input:checkbox').click(function () {
                        showHideMarker();
		            });

                    function showHideMarker()
                    {
		                $('#map_canvas').gmap('closeInfoWindow');
		                $('#map_canvas').gmap('set', 'bounds', null);
		                var filters = [];

                            
                        $('input[type=checkbox]:checked').each(function () {
                                   if (this.checked) {
                                       filters.push($(this).val());
                                   }
                        }).get().join(',');

            
		                if (filters.length > 0) {
		                    $('#map_canvas').gmap('find', 'markers', { 'property': 'tags', 'value': filters, 'operator': 'OR' }, function (marker, found) {
		                        marker.setVisible(found);
		                    });
		                } else {
		                    $.each($('#map_canvas').gmap('get', 'markers'), function (i, marker) {
		                        marker.setVisible(true);
		                    });
		                }

                    }

		        });
		    });
	
    </script>