Question

So I have two Google maps on the same web page.
The page is made of a number of divs that are hidden and shown using jQuery like this:

$('a#FibreTrigger').click(function () {
    clearTabs();

    $('#FibreTab').show();
    $('a#FibreTrigger').addClass('active');
    google.maps.event.trigger(fibreMap, 'resize');
    return false;
});

//hide all of the tabs
function clearTabs() {
    $('#OptusTab').hide();
    etc.

    $('a#OptusTrigger').removeClass('active');
    etc.
}

(the resize trigger is used as the maps were not displaying correctly on some occasions)
If I set both the maps to be visible and then load the maps then all is well the maps work exactly as expected.

However, if one of the maps is hidden as it is loaded I get a weird problem. The map displays and the layers, markers, etc are on the map, but what should be the centre of the map is at the top-left hand corner.

It’s not a huge problem but I want to know if I am doing something wrong, or if this is an inevitable problem with what I am doing?

Answer 1

On your ‘body’ tag I’m guessing you’ve got some kind of initialize() or load() function? Have you tried, rather than calling this functions when the page loads, calling it when the div with the map in is shown?