1

I have a little Google Map app here: http://crocdoc.ifas.ufl.edu/projects/saveyourlogo/map/

This page is being embedded into the "Actions" tab on this page via iframe: http://saveyourlogo.org/en/programs/crocodile/american-crocodile/

Since that page begins with the "Actions" content div set to display:none, my map div (#map_canvas) starts out at size 0x0 and the map can't initialize properly. The Google Maps API says to simply use google.maps.event.trigger(map, 'resize'); once your map div is resized.

Since I don't have control of anything outside my little map's iframe, I can't attach the resize function to the "Actions" button. So I'm trying to detect a change in the #map_canvas div's size, and then fire the resize function. Since (I believe) you can't normally attach a resize event to a div, I've used Ben Alman's jQuery resize event script. (StackOverflow isn't letting me post more than two links, but it's easily Googled.) It is said to work with IE8, and I've seen that the examples on his site do.

It works perfectly in Firefox, but the resize event doesn't fire at all in IE8. (When I un-comment out the width alert, it does not display in IE8.)

function reset_map() {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center); 
    map.setZoom(zoom);
}


$('#map_canvas').resize(function() {    
//  alert(document.getElementById('map_canvas').offsetWidth);
    reset_map();
}); 

Any idea why? Or perhaps suggestions for a more elegant solution?

UPDATE: I've tried building my own little script that takes the offsetWidth of the div every 300ms, and then compares it to the last, but I just end up crashing the browser. Is there any way to detect this change from display:none to display:block without using a constant, quick loop? I know Ben Alman's script mentioned above uses one every 250ms.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.