IssueTracker

Please add a link to your demo.

I had thought my report was precise enough for you to reproduce it faster than me...

Anyway, here is a link to a demo : http://nimwendil.net/_ext/gmaps/issue4052.html

This bug seems related to what I have experienced:

Draggable markers disappear after being dragged if map property is set again

Steps to reproduce:
 - create a map and add a draggable marker
 - add an event listener to the click event which updates the position of the marker and also sets the map attribute again
 - drag the marker
 - click anywhere in the map
--> the marker disappears

Demo: http://pastehtml.com/raw/bva0gduez.html

This can easily be resolved by not setting the map attribute again in the click listener.

See also Issue 4091

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

Google: this bug also breaks the very popular MarkerCluster and MarkerClustererPlus utility libraries. See Issue 4091

Bug reproduced under XP with Firefox 7.0.1  (XP: Version 5.1 Build 2600.xpsp_sp3_gdr.101209-1647: Service Pack 3)

Bug NOT reproduced under XP with Firefox 3.6

Seems to work, thanks.

[Comment deleted]

I can confim that it is also now working for this:
marker.setMap(null)
marker.setMap(map)
marker.setAnimation(google.maps.Animation.BOUNCE)
markerSetanimation(null)
market.setMap(null)
marker.setMap(map)

Thanks for the fix!

Can also reproduce this bug, using FF11. Intercepting the bubbeling DOMMouseScroll does work until the mouse leaves the map div, then the event handler will never be fired again - but the page does scroll-with again. This behavior is only in Firefoxes, not in other browsers.
Please visit https://bugzilla.mozilla.org/show_bug.cgi?id=681200#c15 .
Smells like a Google Maps Firefox hack, that does remove my handler or whatever. Are there non-minified versions of Google APIs?

This is definifivly a bug in Google Maps JS API v3. I'm trying to prevent the document to scroll with, when zooming the map like this:

var mouseScrollStop = function (e) {
  if (e) {
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;
  }
  return false;
};
if (window.addEventListener) {
  $googlemap[0].addEventListener("mousewheel", mouseScrollStop, false);
  $googlemap[0].addEventListener("DOMMouseScroll", mouseScrollStop, false);
}
else if (window.attachEvent) {
  $googlemap[0].attachEvent("onmousewheel", mouseScrollStop);
}

This is working well, if the mouse is over the map before ondocumentready, until the mouse has left the map once. Then, the mouseScrollStop handler will only be fired if the mouse is over the Google logo, the trademarks or the map control tools. It isn't removed and also not overwritten.

However, I can reproduce this strange behavior (without a google map) only, if I have a box, an inline-box and a handler (on the inline-box), that does event.stopPropagation without event.preventDefault. Then my handler (on the box) won't be called and no one does preventDefault.

Did G forget to do preventDefault in DOMMouseScroll event? I can't read code like fl, rl, Ei, Fi, Gi and Hi!

Hope this will be fixed.

[Comment deleted]

[Comment deleted]

Simplest workaround that's not zooming or rescrolling or else zipping:

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

// 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'
    });

    if (document.addEventListener) {
      // Internet Explorer, Opera, Google Chrome and Safari
      $div[0].addEventListener("mousewheel", mouseScrollStop, false);
      // Firefox
      $div[0].addEventListener("DOMMouseScroll", mouseScrollStop, false);
    }
    else if (document.attachEvent) { // IE before version 9
      $div[0].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 () {
    $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.

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.

works like a charm, thanks a lot!

Status still:   NeedsMoreInfo ??
What additional info do you need?

All firefoxes from v7 to v13 are affected.

Just go to your developer blog:
http://googlegeodevelopers.blogspot.de/2012/06/google-maps-api-now-with-even-more.html
place the mouse over the map, scroll with the mousewheel and see that not only the map zooms but aditionally the page scrolls.

The approach of workarounds are wrong.

Gecko has two types of mouse wheel events: one is DOMMouseScroll event, this indicates that wheel is turned enough amount for scrolling n lines or pages. The other is MozMousePixelScroll event. This indicates how much pixels should be scrolled by the native wheel event.

Gecko for Windows is now supports high resolution scrolling. If users turn their wheel only for 0.n line or page, Gecko dispatches only MozMousePixelScroll event because DOMMouseScroll event cannot indicate the fractional delta value.

If preventDefault() of DOMMouseScroll events are called, the following MozMousePixelScroll events and their default actions (i.e., scrolling) are prevented. However, perhaps, Google map doesn't handle MozMousePixelScroll events, then, it fails to prevent the default action (scroll) because DOMMouseScroll events are not fired before them.

So, the right approach is, you should consume MozMousePixelScroll events:

(root element of google map).addEventListener(
  "MozMousePixelScroll", function (event) { event.preventDefault(); }, false);

I've posted my workaround also on stackoverflow with a working example on jsfiddle:

http://stackoverflow.com/questions/7122826/google-maps-in-firefox6-zooms-znd-scrolls-page/10617310#10617310

Intercepting the root element of google maps does only work if the mouse is over maps tools, because gmaps calls stopPropagation without preventDefault.
I didn't test 'high resolution' scrolling, maybe you need to add this, however the workaround to intercept DOMMouseScroll in overlayMouseTarget element works fine.

this is still an issue with Firefox. Scrolls works as expected in Chrome but FF tries to scroll both screen and map

I've updated the script on stackoverflow, to have a complete piece of code for the ScrollInterceptOverlay google.maps.OverlayView Object class function.

However, i don't have such a mouse.. May someone try please ;) with support for decimal mouse delta data event *MousePixelScroll

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

@Uli I'm currently using your script (and +1'd your answer, btw). It seems to work well. I've updated to your latest code and it also works. Still, this should be fixed by Google as it is clearly a bug.

I was having this same isssue using the jquery gmaps plugin. I tried what Comment 17 recommended. (http://code.google.com/p/gmaps-api-issues/issues/detail?id=3652#c17)

I first initiated the jquery gmaps plugin on a element, then i binded the event, like comment 17 had said:

(root element of google map).addEventListener(
  "MozMousePixelScroll", function (event) { event.preventDefault(); }, false);

But in my case i used the jquery on() method:
jQuery("#gMaps").on(
  "MozMousePixelScroll", function (event) { event.preventDefault(); }, false);

this right approach worked perfectly.. thanks dtoyboy!

Thank you, comments 17 and 22!!! Too bad no upvote :(

Just tried the example problem map @ http://googlegeodevelopers.blogspot.de/2012/06/google-maps-api-now-with-even-more.html from Ubuntu 12.10 Firefox 18.0.1 and it scrolls like a charm (map zooms, page does not scroll) (Thinkpad X220).

Is this still relevant? Is it OS/hardware dependent?

This should be fixed in the 3.11 release from January 7th. Please try this out and let me know if there's still an issue.

I'm running 3.12 and it's still an issue

Maps API 3.16 still an issue in FF 27.0.1.
This:
$('#map').on('DOMMouseScroll mousewheel wheel MozMousePixelScroll', function (e) {
        e.preventDefault();
        return false;
});
is not a solution as it disables zooming as well. Please help.
Test here: http://have-you-been-here.appointment.at/