Search code examples
google-mapsfirefoxgoogle-maps-api-3kmlgoogle-fusion-tables

Google Maps polygons hover gap on Firefox

I created a map where some polygons are downloaded from a Fusion Table and drawn on the map.
http://jsfiddle.net/2wej9smf/135/
http://codepen.io/massic80/pen/WvgKym

google.maps.event.addListener(country, 'mouseover', function(e) {
    this.setOptions({
        fillOpacity: this.fillOpacity + 0.2
    });
});

google.maps.event.addListener(country, 'mouseout', function() {
    this.setOptions({
        fillOpacity: this.fillOpacity - 0.2
    });
});

The expected behavior is having any yellow country more opaque when hovering on it.
Everything is OK on Chrome, but on Firefox there is a gap in the hovering: it looks dependent on the left (white) and top (green) gap between the map and container's size.
For example, if you hover on the middle of Peru, Chile or Argentina are "highlighted".
Lowering green bar height and left margin or scrolling down within the box, in order to lower the distance between the map and the borders, seems reducing the gap.
In particular, when clicking a country it's highlighted correctly (it receives click event).

Solution

  • UPDATE 7/23/15 1:49PM MDT This is a known bug between Firefox and Google Maps, the current workaround is to load the Google Maps js file with "v=3" on it, so load the source using: src="http://maps.google.com/maps/api/js?v=3&sensor=false" or src="http://maps.google.com/maps/api/js?v=3"

    I have tested this in Firefox 39.0 and this workaround stops the issue from happening.

    If I had the feedback I'd comment, because I don't consider this a "solution". But the fact is this is a straight up Firefox bug. It happens in version 39.0 of Firefox (for Windows and Mac), but not in 38.1.0 and earlier (this doesn't happen with 38.1.0ESR or 37.0.2).

    This only happens in Firefox, not any other browser I could test on Windows or Mac. And yes the "hover" point is offset by the height of your green bar (Google Maps thinks you're hovering 200 pixels further down the map) and the size of your left margin (it thinks you're hovering 100 pixels to the right).

    I have reproduced (i.e. I found it was happening) the problem on a site I built http://www.sawtoothtrails.com

    I will submit a bug report to Firefox and see how that goes.

    -- Bass

    -- UPDATE 7/22/15 6:43PM MDT I misspoke above, this does happen on Firefox for Mac version 39.x as well, although not on Firefox for Mac 38.0.1