javascript - Customizing Scroll Wheel Zooming in Google Maps - Stack Overflow

admin管理员组

文章数量:1334133

Can you customize the scroll wheel zooming in Google Maps? If a user uses the scroll wheel on their mouse, I want the map to zoom by 2 or 3 levels. Is it possible?

Check out my jsFiddle here: /

I get the following error in the console: Uncaught RangeError: Maximum call stack size exceeded

Here's the code:

function initializeMap() {
    map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 14,
        center: new google.maps.LatLng(42.35210605281608, -83.12983274459839),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    google.maps.event.addListener(map, 'zoom_changed', function () {
        map.setZoom(map.getZoom() + 2);
    });
}

Can you customize the scroll wheel zooming in Google Maps? If a user uses the scroll wheel on their mouse, I want the map to zoom by 2 or 3 levels. Is it possible?

Check out my jsFiddle here: http://jsfiddle/jj7ymt5c/1/

I get the following error in the console: Uncaught RangeError: Maximum call stack size exceeded

Here's the code:

function initializeMap() {
    map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 14,
        center: new google.maps.LatLng(42.35210605281608, -83.12983274459839),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    google.maps.event.addListener(map, 'zoom_changed', function () {
        map.setZoom(map.getZoom() + 2);
    });
}

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow asked Jun 25, 2015 at 22:24 kaoscifykaoscify 1,76377 gold badges3838 silver badges7676 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

You may disable the built-in scrollwheel-zooming and implement your own handler:

function initializeMap() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
      zoom: 14,
      scrollwheel: false,
      center: new google.maps.LatLng(42.35210605281608, -83.12983274459839),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }),
    fx = function(e) {
      e.preventDefault();
      var z = (e.wheelDelta > 0 || e.detail < 0) ? 3 : -3;
      map.setZoom(Math.max(0, Math.min(22, map.getZoom() + z)));
      return false;
    };
  google.maps.event.addDomListener(map.getDiv(), 'mousewheel', fx);
  google.maps.event.addDomListener(map.getDiv(), 'DOMMouseScroll', fx);
  
}

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

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

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

---

The fix related to the ments(zoom to mouse-position):

the relevant part is the projection_changed-handler, add it somewhere after the creation of the google.maps.Map-instance

---

function initializeMap() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
      zoom: 7,
      scrollwheel:false,
      center: new google.maps.LatLng(42.352, -83.129)
    });
  
  
  google.maps.event.addListenerOnce(map,'projection_changed',function(){
      
      var steps=3,//the desired zoom-steps on each mousescroll 
          goo = google.maps,
          map = this,
          div = map.getDiv();
      goo.event.addListener(map,'scrollwheel_changed',function(){
      
      var evs = this.get('wheelevents');
      if(this.get('scrollwheel')){
         if(evs){
            for(var k in evs){
              goo.event.removeListener(evs[k])
            }
         }
         this.set('wheelevents',{})
      }
      else{
         var fx = function(e) {
              e.preventDefault();
              var target  = e.target || e.srcElement;
              
              if(target.parentNode.parentNode.parentNode!==div){
                return;
              }        
              
              var rect    = target.getBoundingClientRect(),
                  dir     = ((e.wheelDelta > 0 || e.detail < 0) ? 1 : -1)*steps,
                  zoom    = Math.max(0, Math.min(25, map.getZoom() + dir)),
                  fz      = Math.pow(2,map.getZoom()),
                  mo      = { x:  e.clientX - rect.left,
                              y:  e.clientY - rect.top},
                  co      = { x:  div.offsetWidth/2,
                              y:  div.offsetHeight/2},
                  cp  = map.getProjection().fromLatLngToPoint(map.getCenter()),
                  mc  = map.getProjection()
                             .fromPointToLatLng(new google.maps.Point(
                             (cp.x*fz-(target.offsetWidth/2-mo.x))/fz
                             ,
                             (cp.y*fz-(target.offsetHeight/2-mo.y))/fz
                             )),
                  mp= map.getProjection().fromLatLngToPoint(mc),
                  __zoom,__fz,__cp;
              
              map.setZoom(zoom);
              __zoom=map.getZoom();
              __fz=Math.pow(2,__zoom)
              __cp=new google.maps.Point(
                (mp.x+(co.x-mo.x)/__fz)
                ,
                (mp.y+(co.y-mo.y)/__fz)
              );
              map.setCenter(map.getProjection().fromPointToLatLng(__cp))
              return false;
            };
            
         this.set('wheelevents',
                  {
                    mousewheel: goo.event.addDomListener(div, 
                                                        'mousewheel', fx),
                    mousescroll:goo.event.addDomListener(div, 
                                                        'DOMMouseScroll', fx)
                  }
                 );
      }
    });
    goo.event.trigger(map,'scrollwheel_changed')
  });  

}

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

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

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

---

Note: This will observe the scrollwheel-property of the map, to apply the desired behaviour from the beginning set the scrollwheel-option of the map to false. When you want to add/remove the behaviour later set the scrollwheel-property via set:

map.set('scrollwheel',true);//or false

So there are 2 problems,

1) current zoom level+2 can exceed 20, which is the maximum zoom level google maps support. You should make sure it does not go over 20.

2) set zoom would actually trigger your on zoom change listener. So you should put a flag or something, to indicate if this zoom is trigger by user or by set zoom level

You might be exceeding the zoom size Range. Therefore,

• 1.First, please know the zoom range available by mapObject.getZoom() and then
• 2.Use if condition to increment setZoom() by 2 only if the current zoom size is below the range by 2.

For example, the zoom range available for your zone is 0-20, then use if condition to check the current zoom size if not >18 then set zoom size = current zoom size +2
which would reach upto max 20....

if (map.getZoom() < 19) 
{
map.setZoom(map.getZoom() + 2); 
}

The stack overflow is due to the behavior of the recursive function you created. As a normal mousewheel action is triggered, zoom is triggered, your code is running, and changes the zoom, and since this changes the zoom, your code runs again and again and again. The answers provided by others do the job. But to have zoom at mouse point, you need to pan your map first to put the position of the mouse at the center of the div area.

I wasted like an lot of time on this and all the code that was supplied is correct but also un necessary as mouse scroll is false by default and you need to use ctrl + scroll wheel that tells me the function is already there and no need to create the function like all the answers supplied it is very, very simple:

 function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(-19.257753, 146.823688),
        zoom: 2,
        scrollwheel: true,
        mapTypeId: 'terrain'
    });

Ass scrollwheel zoom is false by default in the function supplied by google insert scrollwheel: true, and zoom level 2 no need for hours of coding!.

本文标签： javascriptCustomizing Scroll Wheel Zooming in Google MapsStack Overflow