Ограничить уровень масштабирования колесика прокрутки на Google Картах

Question

У меня есть следующий код, который должен ограничивать масштабирование на моей карте. Масштаб ограничен, когда я вручную нажимаю кнопки увеличения и уменьшения (плюс и минус) элементов управления карты. Это как-то не происходит, когда я использую колесо прокрутки для увеличения. Как я могу ограничить уровень масштабирования, который применяет мое колесо прокрутки? Я не хочу отключать масштабирование с помощью колеса прокрутки.

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 52.520008, lng: 13.404954},
    });

    var old_zoom_level = 12;
    map.data.loadGeoJson('data/1000_berlin_buildings.json');
    //map.data.loadGeoJson('google.json');

    map.data.setStyle(styleFeature);
    map.data.addListener('mouseover', mouseInToRegion);
    map.data.addListener('mouseout', mouseOutOfRegion);

    map.addListener('bounds_changed', function(){
        //console.log("bounds changed");
    });

    google.maps.event.addListener(map, 'zoom_changed', function () {
        // if (map.getZoom() < 9) map.setZoom(9);
        var new_zoom_level = map.getZoom();
        console.log("zoom Changed from "+ old_zoom_level +" to "+new_zoom_level);

        if (new_zoom_level < __min_zoom_level) {
            new_zoom_level = __min_zoom_level;
            map.setZoom(__min_zoom_level);
        }
        if (new_zoom_level > __max_zoom_level) {
            new_zoom_level = __max_zoom_level;
            map.setZoom(__max_zoom_level);
        }
        old_zoom_level = new_zoom_level;
    });

}

Answer 1

Вы можете сделать это намного проще, используя свойства карт minZoom и maxZoom.

var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: {lat: 52.520008, lng: 13.404954},
    minZoom: 10,
    maxZoom: 14
});

Если вам необходимо изменить эти значения в любой точке, просто используйте карту setOptions() метод:

map.setOptions({
  minZoom: 8,
  maxZoom: 15
});

Рабочий фрагмент:

var map;

function initialize() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: {
      lat: 52.520008,
      lng: 13.404954
    },
    minZoom: 10,
    maxZoom: 14,
  });

  google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {

    map.setOptions({
      minZoom: 5,
      maxZoom: 15
    });
  })
}

initialize();

#map-canvas {
  height: 150px;
}

#btn {
  margin-top: 10px;
  line-height: 30px;
  background: yellow;
  cursor: pointer;
}

<div id="map-canvas"></div>
<button id="btn">Change limits to min: 5 and max: 15</button>

<script src="https://maps.googleapis.com/maps/api/js"></script>