CODEWITHSUNDEEP
javascriptgoogle-maps
kaoscify
kaoscify

Reputation: 1763

Zoom In and Out of Google Maps based on Increments of 3

I earlier asked this question which had a great solution (see below), but now I am wondering if it's possible to modify the zoom in and out levels of Google Maps API so that the map changes based on increments of 3 as the zoom_changed event is triggered?

This solution from the previous thread worked well for increments of 2:

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

An example JSFiddle is here.

Edit: So the above code works if 2 is replaced by 3. But one thing I'm struggling with is setting the initial zoom to 11. It does not work. Defaults to 9 if zoom rate is 3, or defaults to 10 if zoom rate is 2.

Upvotes: 0

Views: 1661

Answers (1)

ScaisEdge
ScaisEdge

Reputation: 133380

You can easy change the zoom rate
If you assign the rate ath the var zoom_rate you can easy change the configuration see this fiddle https://jsfiddle.net/33qskxdg/

    function initialize() {


      var zoom_rate = 3    // assign the zoom rate

      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);

      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);

Upvotes: 2

Related Questions