Google maps - Zoom in increments

Based on: https://stackoverflow.com/questions/38002418/zoom-in-and-out-of-google-maps-based-on-increments-of-3

by katalin_2003

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_canvas">
  <div id="zoom"></div>
</div>

CSS

html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0
}

#zoom {
  font: bold 2em Monospace;
  background: tomato;
  width: 30px;
  text-align: center;
}

JavaScript

function initialize() {
  var ctrl = document.getElementById('zoom');
  map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 14,
      center: new google.maps.LatLng(52.549,
        13.425),
      noClear: true
    }),


    map.controls[google.maps.ControlPosition.TOP_CENTER].push(ctrl);

  var zoom_rate = 2;
  google.maps.event.addListener(map, 'zoom_changed', function() {
    var z = this.getZoom();
    if (z % zoom_rate) { //when zoom is a odd number
      var fx = ((!isNaN(this.get('z')) && this.get('z') < z)) ? zoom_rate : 0;
      this.setZoom(Math.floor(z / zoom_rate) * zoom_rate + fx);
    } else {
      this.set('z', z);
    }
    ctrl.innerHTML = this.getZoom();
  });
  google.maps.event.trigger(map, 'zoom_changed');
}


google.maps.event.addDomListener(window, 'load', initialize);