maxZoom and styled Google Fusion map

Question

When I use a styled Google map, it ignores the maxZoom and minZoom I have set, deleting the zoom bar altogether. The zoom limits work if I don't include the StyledMapType. Am I missing something? Or are maxZoom/minZoom not supported with a StyledMapType?

Thanks for the help.

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new 
  google.maps.LatLng(29.45, -95.75),
    zoom: 10
  });



   var style = [
    {
      featureType: 'all',
      elementType: 'all',
      stylers: [
        { saturation: -99 }
      ]
    },
           {
      featureType: 'road.local',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'administrative.land_parcel',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];




   var styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });


   map.mapTypes.set('map-style', styledMapType);





  google.maps.event.addListenerOnce(map, "projection_changed", function(){
  map.setMapTypeId('map-style');        
    layer_0 = new google.maps.FusionTablesLayer({
    query: {
      select: "col3",
      from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7"
    },
    map: map,
    styleId: 2,
    templateId: 2
  });

  setZoomLimit(map, google.maps.StyledMapType);
  setZoomLimit(map, google.maps.MapTypeId.ROADMAP);
  setZoomLimit(map, google.maps.MapTypeId.HYBRID);
  setZoomLimit(map, google.maps.MapTypeId.SATELLITE);
  setZoomLimit(map, google.maps.MapTypeId.TERRAIN);
  map.setMapTypeId(google.maps.StyledMapType);  
}); 

  layer_0 = new google.maps.StyledMapType({
    query: {
      select: "col3",
      from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7"
    },
    map: map,
    styleId: 2,
    templateId: 2
  });
}

  function setZoomLimit(map, mapTypeId){
  var mapTypeRegistry = map.mapTypes;

var mapType = mapTypeRegistry.get(mapTypeId);
mapType.maxZoom = 13;  
mapType.minZoom = 8; }

score 0 · Answer 1 · answered Aug 21 '15 at 04:55

Your code generates javascript errors: Uncaught TypeError: Cannot set property 'maxZoom' of undefined on this line: mapType.maxZoom = 13;. There is no google.maps.StyledMapType. The mapTypeId of your styled map is "map-style". You can't set the maxZoom property of "undefined".
This is incorrect, don't know what it is supposed to do, I don't think it is necessary.

layer_0 = new google.maps.StyledMapType({
  query: {
    select: "col3",
    from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7"
  },
  map: map,
  styleId: 2,
  templateId: 2
});

working fiddle

code snippet:

var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new
    google.maps.LatLng(29.45, -95.75),
    zoom: 10
  });

  var style = [{
    featureType: 'all',
    elementType: 'all',
    stylers: [{
      saturation: -99
    }]
  }, {
    featureType: 'road.local',
    elementType: 'all',
    stylers: [{
      visibility: 'off'
    }]
  }, {
    featureType: 'administrative.land_parcel',
    elementType: 'all',
    stylers: [{
      visibility: 'off'
    }]
  }];

  var styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });
  map.mapTypes.set('map-style', styledMapType);


  google.maps.event.addListenerOnce(map, "projection_changed", function() {
    setZoomLimit(map, 'map-style');
    setZoomLimit(map, google.maps.MapTypeId.ROADMAP);
    setZoomLimit(map, google.maps.MapTypeId.HYBRID);
    setZoomLimit(map, google.maps.MapTypeId.SATELLITE);
    setZoomLimit(map, google.maps.MapTypeId.TERRAIN);
    map.setMapTypeId('map-style');
  });

  layer_0 = new google.maps.FusionTablesLayer({
    query: {
      select: "col3",
      from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7"
    },
    map: map,
    styleId: 2,
    templateId: 2
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

function setZoomLimit(map, mapTypeId) {
  var mapTypeRegistry = map.mapTypes;

  var mapType = mapTypeRegistry.get(mapTypeId);
  mapType.maxZoom = 13;
  mapType.minZoom = 8;
}

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

maxZoom and styled Google Fusion map

1 Answers1