I made a google map that can change sizes but it does not work in Firefox

Question

My code works in Google Chrome and IE but does not work in Firefox 12. Anyone know how I can make it work in Firefox 12?

Code:

...
/* START FULLSCREEN BUTTON */
// Globals
var map_size    = 'small';
var map_position= 'inherit';
var map_top     = 0;
var map_left    = 0;
var map_width   = 0;
var map_height  = 0;
var map_zIndex  = 0;
...
// when button clicked
        if(map_size == 'small') {
            map_size = 'large';
            map_position= $('div.map').css('position');
            map_top     = $('div.map').css('top');
            map_left    = $('div.map').css('left');
            map_width   = $('div.map').css('width');
            map_height  = $('div.map').css('height');
            map_zIndex  = $('div.map').css('z-index');
            $('#fullscreen').attr('src','/assets/images/restore.png');
            $('#enlarge').html('Shrink Map');
            controlUI.title = 'Click to make map smaller';
            $('div.map').css('position',    "fixed");
            $('div.map').css('top',     "10%");
            $('div.map').css('left',        "10%");
            $('div.map').css('width',       "80%");
            $('div.map').css('height',      "80%");
            $('div.map').css('z-index', 10000);
            google.maps.event.trigger(map,'resize');
            map.panToBounds(bounds);
            map.fitBounds(bounds);
        } else {
            map_size = 'small';
            $('div.map').css('position',    map_position);
            $('div.map').css('top',     map_top);
            $('div.map').css('left',        map_left);
            $('div.map').css('width',       map_width);
            $('div.map').css('height',      map_height);
            $('div.map').css('z-index', map_zIndex);
            $('#fullscreen').attr('src','/assets/images/fullscreen.png');
            $('#enlarge').html('Enlarge Map');
            controlUI.title = 'Click to make map bigger';
            google.maps.event.trigger(map,'resize');
            map.panToBounds(bounds);
            map.fitBounds(bounds);
        }
    }
...

Here's a live example http://www.helloflight.com/flight/dlh410.cfm

Update - Note that the live example is using the setTimeout solution below, and thus works in Firefox 12, but without the setTimeout solution does not work in Firefox 12

As you can see, it works in the latest version of Safari, Google Chrome, and IE, but in Firefox, when the map div is enlarged, the map tiles continue to be the size of the original div dimensions and don't expand to fill the new div dimensions.

[StackOverflow is not going to read all that](http://meta.stackexchange.com/a/129787/137961). It's up to you to isolate the particular problems with your code through debugging, and then asking pertinent questions - rather than dumping it all here. — Andrzej Doyle, May 30 '12 at 15:37
You should store in a variable `$('div.map')`. Also, jQuery lets you define several css properties at once if you pass an object as an argument. Check [this example](http://api.jquery.com/css/#example-1-3). — Denis, May 30 '12 at 22:25
The example at http://www.helloflight.com/flight/dlh410.cfm is working fine for me in Firefox 12.... — Boris Zbarsky, May 31 '12 at 03:00

score -1 · Answer 1 · answered May 30 '12 at 18:12

-1

Best I can tell, Firefox's Javascript engine has a cheat in it where it tries to execute lines within functions in parallel where it thinks the code does not need to be run in order, which, when it guesses correctly, would speed things up, but here, because $('div.map').css('width', "80%"); and $('div.map').css('height',"80%"); are none blocking on Firefox (unlike the rest of the browsers), google.maps.event.trigger(map,'resize'); completes before $('div.map').css('width',"80%"); and $('div.map').css('height',"80%"); thus, Google Maps object resizes with the old dimensions, the fix: Replace:

 google.maps.event.trigger(map,'resize');
 map.panToBounds(bounds);
 map.fitBounds(bounds);

With:

 setTimeout(resizeMap,250);

And create function:

function resizeMap() {
    google.maps.event.trigger(map,'resize');
    map.panToBounds(bounds);
    map.fitBounds(bounds);
}

The 250ms delay should be enough for Google Maps v3 object to know the correct dimensions of the resized div. To make everything render smoother, faster, you could detect the browser, and if browser is Firefox, call function via setTimeout, and if not Firefox, just call function.

answered May 30 '12 at 18:12

Robert Louis Murphy

1,558
1
16
29

... The property value of the damn container is immediately set... how can you suggest that it is not available and that a setTimeout would work.... I would double check runTimeStyle to make sure you are right on that note :p – Jay May 30 '12 at 21:34
And I would also add a eventListner to `map` for `resize` and in side I would call `checkResize`... Then again you are the same person who asked why strings can't replace enums..... – Jay May 30 '12 at 21:38
checkResize only works in v2, I'm using v3 - note the google.maps.event.trigger(map,'resize'); in the code of the question, google.maps.event.trigger(map,'resize'); is maps v3, not maps v2. – Robert Louis Murphy May 31 '12 at 18:55
`google.maps.event.addListener(map, "idle", function(){ google.maps.event.trigger(map, 'resize'); }); this.map.setZoom( this.map.getZoom() - 1); this.map.setZoom( this.map.getZoom() + 1);` – Jay May 31 '12 at 19:24

I made a google map that can change sizes but it does not work in Firefox

1 Answers1