I trying to display Fusion Table layers base on Zoom level, but only first layer that is on Zoom level 1 is shown on the map and the other layers from the code are not displayed at all (regardless of zoom level layer that is on Zoom level 1 remains all the time at the map). The code is below:

<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
var center = new google.maps.LatLng(-40.979898,173.305662);
function init() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: center,
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

var parcel_boundary = new google.maps.FusionTablesLayer({
query: {
    select: 'parcel_boundary_1_9999',
    from: '1ouLS0fm8tPPQNQRpr-bwE4ct-cBkMB-Ru_XttDQ'
  },
  styles: [{
    polygonOptions: {
    strokeColor: "#333333",
    strokeOpacity: 0.8,
    strokeWeight: 0.7,
    fillColor: "#36549C",
    fillOpacity: 0.3
    }
}]
});

var meshblock_1_24113 = new google.maps.FusionTablesLayer({
query: {
    select: 'meshblock_1_24113',
    from: '1nLxnoXlipws7PfjBihBBGL2BVd7OKdxThSuLVRs'
  }       
});

var territorial_authority = new google.maps.FusionTablesLayer({
query: {
    select: 'territorial_authority',
    from: '1YBAtek3BB_sQsxHPJxDTP6Pa6Fy_N12iQ8bIZQQ'
  },
  styles: [{
    polygonOptions: {
    strokeColor: "#333333",
    strokeOpacity: 0.8,
    strokeWeight: 0.7,
    fillColor: "#C42D24",
    fillOpacity: 0.3
    }
}]       
});

var zoom =  map.getZoom();
if (zoom >=1 && zoom <=8) { 
    territorial_authority.setMap(map);
    meshblock_1_24113.setMap(null);
    parcel_boundary.setMap(null);
} 
if (zoom >9 && zoom <=10) {
    territorial_authority.setMap(null);
    meshblock_1_24113.setMap(map);
    parcel_boundary.setMap(null);
}
else if (zoom >11 && zoom <=15) {
    territorial_authority.setMap(null);
    meshblock_1_24113.setMap(null);
    parcel_boundary.setMap(map);
}
;

}
</script>

</head>    
<body id="body" onload="init();">
<div id="map_canvas" style="position:absolute; border-style:solid; border-width:1px; border-color:#333333; left:50%; top:20px; width:1000px; height:860px; z-index:1; margin-left: -500px;"></div>
</body>
</html>

Does anyone have experiences with a problem like this?

Best, Darko

1 Answers

2
geocodezip On Best Solutions

Your code does not include a listener for the "zoom_changed" event on the map, that event will fire whenever the zoom changes on the map and let you act on the new zoom level.

google.maps.event.addListener(map,"zoom_changed", function() {
  var zoom =  map.getZoom();
  if (zoom >=1 && zoom <=9) { 
    territorial_authority.setMap(map);
    meshblock_1_24113.setMap(null);
    parcel_boundary.setMap(null);
  } 
  else if (zoom >9 && zoom <=11) {
    territorial_authority.setMap(null);
    meshblock_1_24113.setMap(map);
    parcel_boundary.setMap(null);
  }
  else if (zoom >11) {
    territorial_authority.setMap(null);
    meshblock_1_24113.setMap(null);
    parcel_boundary.setMap(map);
  }
});