2

I'm using iProperty to create tabs with content for different property owners.

I have hacked the core files a lot to get the site looking and functioning how I want it, but I'm having a problem with the maps in the tabs.

If you look at the below page, and then click the Location tab, you will see the problem whereby it only loads a small portion of the map. Incidentally, the problem disappears if you resize the browser while the map tab is active, so I think there is some issue when the map initially loads.

http://red-ferndevelopment.co.uk/OfficeExperts/index.php?option=com_iproperty&view=property&id=90&Itemid=318

If anyone could help, I'd be more than grateful.

Many thanks, Austin

2
  • I don't see any related JS errors in the browser console. Did this happen before you many your core hacks?
    – Lodder
    Jun 24, 2014 at 18:39
  • @Austin-- I don't see the problem in Google Chrome. Is this only happening on certain browsers?
    – user101289
    Jun 27, 2014 at 17:36

4 Answers 4

5

First the reason re sizing fixes it is that the map checks that everything is "correct" on browser resize. Since the tab is hidden by default the size of the map is smaller until the tab is opened, but no event is getting sent to the map to notify of the change. I have seen similar problems with google maps before and its not really a problem, just something that can get missed easily.

There are a couple of fixes for that, the first is by calling map.checkResize() when the tab is opened. Though given it is a third party component that may not be easy, but if core modifications have already been made that may not be a problem. Replace map with the actual variable for the map.

The second, easier way to "trick" it without actually touching it is to simply do something like this:

jQuery('a[href="#propmap"]').on('click',function(){
   jQuery(window).trigger('resize');
});

You can place that anywhere (as long as its after the DOM has loaded of course) and it should fix it. It triggers a resize event automatically when the tab is clicked so it should force the map to work without a manual resize.

The first suggestion is the best as it is not any kind of "hack" but the second should work no matter what.

2

Bootstrap tabs (and carousels and modals) are initially set to display none, until they become active, so the parent element of your map has height / width of 0.

The best way to resolve this is to call your map script after the tab has been displayed, not on document ready. On document ready, there is nothing to load your map into as far as the browser is concerned.

Bootstrap provides a method to do this with the shown.bs.tab event http://getbootstrap.com/javascript/#tabs

So, you simply need something like this that instantiates the map after the tab has finished being displayed:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // Your Google map code here
});
1
  • $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // Your Google map code here }) It worked for Bootstrap tabs
    – user1785
    Aug 15, 2014 at 10:31
1

Seth Warburton wrote: Bootstrap tabs (and carousels and modals) are initially set to display none, until they become active, so the parent element of your map has height / width of 0.

I had the same problem with Bootstrap3 as you. finally I ended up with the simple CSS solution.

.tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}

.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}
0

You can add this css declaration to prevent conflict Bootstrap/Google Map (if id of your map is #map). In some cases, it solves the issue:

#map img {
    max-width: none;
}

But, you may have to load map script only when tab is displayed.

$('a[href="#propmap"]').on('shown', function() {
    // When tab is displayed... will run google map code
    // Your Google map code here
}

Hope this can help!

0

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.