Google maps in firefox6 zooms znd scrolls page_问答_开发者

I have problem with Firefox6 (don't know if it also concerns earlier versions).

I want to embed Google Map on page, and when page has scrollbars (is longer than viewport) mouse wheel not only zooms map but also scrolls page. I tried to catch mousewheel event and stop propagation but this event isn catchable when cursor os over map. When cursor is over map controls (zoom control, google logo, etc) i can catch event and stop propagation.

What is more strange it not happens always. Sometimes page srolls and after few 开发者_运维知识库scrolls it stops and mousewheel only zooms map (as expected). Sometimes page doesn't scroll and sometimes it scrolls with zoom all the time. Can't find pattern.

Source code is simple:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>test</title>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            window.onload = function(){
            var latlng = new google.maps.LatLng(52.25, 21.01);
            mapOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false,
            zoomControl:true,
            mapTypeControl:false
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            }
        </script>

    </head>
    <body>
        <p style="height:500px;">-lot of text-</p>
        <div id="map_canvas" style="width:500px; height:500px;"></div>
        <p style="height:500px;">-lot of text-</p>
    </body>
</html>

Your problem is also described on code.google.com, this problem is only in Firefox, but it isn't a Firefox bug:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=3652 http://code.google.com/p/gmaps-api-issues/issues/detail?id=1605

Have also found out a workaround, that is not re-scrolling or re-zooming and works fine:

A new ScrollInterceptOverlay derived from google.maps.OverlayView, prepending a div on MapPanes.overlayMouseTarget:

Version with jQuery

// Ensure to have google.maps loaded:
// var gmap = new google.maps.Map($googlemap[0], mapOptions);

// Define a ScrollInterceptOverlay function
var ScrollInterceptOverlay = function (gmap) {
  if (!(this instanceof ScrollInterceptOverlay)) return;

  var $div;
  var $mapDiv;

  var initialize = function () {
    $div = $('<div />').css({
      position: 'absolute', top: 0, left: 0,
      display: 'inline-block'
    });

    var div = $div[0];
    if (div && div.addEventListener) {
      // Internet Explorer, Opera, Google Chrome and Safari
      div.addEventListener("mousewheel", mouseScrollStop);
      // Firefox
      div.addEventListener("DOMMouseScroll", mouseScrollStop);
      div.addEventListener("MozMousePixelScroll", mouseScrollStop);
    }
    else if (div && div.attachEvent) { // IE before version 9
      div.attachEvent("onmousewheel", mouseScrollStop);
    }

    this.setMap(gmap);
  };

  var mouseScrollStop = function (e) {
    if (e && e.preventDefault) e.preventDefault();
  };

  this.onAdd = function () {
    $div.prependTo(this.getPanes().overlayMouseTarget);
  };

  this.onRemove = function () {

    var div = $div[0];
    if (div && div.addEventListener) {
      // Internet Explorer, Opera, Google Chrome and Safari
      div.addEventListener("mousewheel", mouseScrollStop);
      // Firefox
      div.addEventListener("DOMMouseScroll", mouseScrollStop);
      div.addEventListener("MozMousePixelScroll", mouseScrollStop);
    }
    else if (div && div.attachEvent) { // IE before version 9
      div.attachEvent("onmousewheel", mouseScrollStop);
    }

    $div.detach();
  };

  this.draw = function () {
    if ($mapDiv && $mapDiv.length === 1) {
      $div.css({
        width: $mapDiv.outerWidth(),
        height: $mapDiv.outerHeight()
      });
    }
  };

  var base_setMap = this.setMap;
  this.setMap = function (map) {
    $mapDiv = $(map.getDiv());
    base_setMap.call(this, map);
  };

  initialize.call(this);
};
// Setup prototype as OverlayView object
ScrollInterceptOverlay.prototype = new google.maps.OverlayView();

// Now create a new ScrollInterceptOverlay OverlayView object:
var mapScrollInterceptor = new ScrollInterceptOverlay(gmap);

This workaround is using jQuery, required for calculating outerWidth and outerHeight, but also for better reading.

Version with pure javaScript

Tested live: http://fiddle.jshell.net/fhSMM/7/

// Ensure to have google.maps loaded:
// var gmap = new google.maps.Map(googlemap, mapOptions);

// Define a ScrollInterceptOverlay class function
var ScrollInterceptOverlay = function () {
  if (!(this instanceof ScrollInterceptOverlay)) return;

  var div;

  // private instance function
  var mouseScrollStop = function (e) {
    if (e && e.preventDefault) e.preventDefault();
  };

  // public instance function
  this.onAdd = function () {
    div = document.createElement('div');
    div.style.display = 'inline-block';
    div.style.position = 'absolute';
    div.style.top = div.style.left = 0;

    if (div.addEventListener) {
      // Internet Explorer, Opera, Google Chrome and Safari
      div.addEventListener("mousewheel", mouseScrollStop);
      // Firefox
      div.addEventListener("DOMMouseScroll", mouseScrollStop);
      div.addEventListener("MozMousePixelScroll", mouseScrollStop);
    }
    else if (div.attachEvent) { // IE before version 9
      div.attachEvent("onmousewheel", mouseScrollStop);
    }

    var pane = this.getPanes().overlayMouseTarget;
    var firstChild = pane.firstChild;
    if (!firstChild) {
      pane.appendChild(div);
    }
    else {
      pane.insertBefore(div, firstChild);
    }
  };

  // public instance function
  this.onRemove = function () {
    if (div) {
      if (div.removeEventListener) {
        // Internet Explorer, Opera, Google Chrome and Safari
        div.removeEventListener("mousewheel", mouseScrollStop);
        // Firefox
        div.removeEventListener("DOMMouseScroll", mouseScrollStop);
        div.removeEventListener("MozMousePixelScroll", mouseScrollStop);
      }
      else if (div.detachEvent) { // IE before version 9
        div.detachEvent("onmousewheel", mouseScrollStop);
      }

      var parent = div.parentNode;
      parent.removeChild(div);
    }

    // do not delete div var'iable
    div = undefined;
  };

  // public instance function
  this.draw = function () {
    var map = this.getMap();
    if (map) {
      var mapDiv = map.getDiv();
      if (mapDiv) {
        var rect = mapDiv.getBoundingClientRect();
        div.style.width = rect.width + 'px';
        div.style.height = rect.height + 'px';
      }
    }
  };

};
// Setup prototype as OverlayView object
ScrollInterceptOverlay.prototype = new google.maps.OverlayView();

// Now create a new ScrollInterceptOverlay OverlayView object:
var mapScrollInterceptor = new ScrollInterceptOverlay();
mapScrollInterceptor.setMap(gmap);

Please visit also http://metadea.de/V/ about what (real) javaScript class functions are, and why I like jQuery :)

Works now for me. Also in Firefox, the map is zooming on mousescroll, but no more scrolling the document.

Edit: Updated support for MozMousePixelScroll, refined jS

For now it looks like firefox bug. Will close question when bug will be fixed.

I had the same issue.

You could try to start Firefox with a brand new profile (e.g. by starting the Profile Manager - executing 'firefox -P' on windows systems - and choosing 'Create...') and see if the problem persists.

I had several old but seemingly empty user profiles lying around in the VMs I used to verify if this was a bug in FF 6 and obviously installing only the new binaries didn't help. On the other hand, creating a blank profile did, so I can only think of this being a migration glitch. If major versions of FF are going to be released on a bi-monthly basis, though, a lot of people are going to suffer from similar issues.

Why not take UI control of zooming? This works well for me.

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
    <div class="canvas" style="width:600px;height:400px;"></div>
    <script>
        // Load event
        $(function() {
            var myOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map($('.canvas')[0], myOptions);
            var overlay = new google.maps.OverlayView();
            overlay.draw = function() {};
            overlay.setMap(map);

            // Only a Mozilla bug
            if($.browser.mozilla) {
                // Wait for the map DOM to be ready
                google.maps.event.addListenerOnce(map, 'idle', function() {
                    $('.canvas > div > div:first-child > div').bind('DOMMouseScroll', function(e) {
                        // setTimeout needed otherwise the return false has no effect
                        setTimeout(function() {
                            // Calculate new center
                            var offset = $('.canvas').offset();
                            var pos = overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(e.pageX-offset.left, e.pageY-offset.top));

                            // Calculate new zoom level
                            var zoom = map.getZoom();
                            if(e.detail < 0) zoom++;
                            else if(e.detail > 0) zoom--;

                            map.setCenter(pos);
                            map.setZoom(zoom);
                        }, 1);

                    // Stop propagation (prevent default)
                        return false;
                    });
                });
            }
        });
    </script>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>