Hi guys
I am using the jquery google map plugin with filtering: http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-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.
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
<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
<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>