When a Google fusion table map that uses the small icons is displayed on a mobile device (Samsung Galaxy S2) the icons are almost impossible to click on. It can take 5-10 attempts to make the balloon pop up. A casual user would assume they are not clickable.
It is not feasible to use the big tear-drop shaped icons because they drown out the map.
Is there any way of making the small icons clickable on mobiles please?
My map is defined with width and height 100% and with the mobile meta tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
#map_canvas {width:100%;height:100%;}
</style>
</head>
<body>
<div id="map_canvas"></div>
<script type="text/javascript">
var mapOptions = {
center: new google.maps.LatLng(-32.36, 147.73),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: 'xxxxxxxxxxxxxxxxx'
},
options: {
styleId: 2,
templateId: 3
},
styles: [
{markerOptions: {iconName: "small_yellow"}}
]
});
layer.setMap(map);
</script>
</div>
</body>
</html>
The correct answer is apparently that there is no answer. You just have to use the bigger icons or use a tablet or PC.