I am using MapPress Easy Google Map with the following code in my custom theme:

   $mymap = new Mappress_Map(array("width" => 600,"height" => 300));
   $mypoi_1 = new Mappress_Poi(array("title" => "DC", "body" => "Beautiful Washington, DC", "point" => array("lat" => 38.90279, "lng" => -77.037849))); 
   $mypoi_2 = new Mappress_Poi(array("address" => "500 chestnut st, phildelphia"));
   $mymap->pois = array($mypoi_1, $mypoi_2);
   echo $mymap->display(array("directions"=>"none"));

If i put this code anywhere in the theme it shows the map as desired. I am using jquery tabs script:

jQuery("#property-info .tab_content").hide(); //Hide all content
jQuery("#property-info ul.tabs li:first").addClass("active").show(); //Activate first tab
jQuery("#property-info .tab_content:first").show(); //Show first tab content

//On Click Event
jQuery("#property-info ul.tabs li").click(function() {
    jQuery("#property-info ul.tabs li").removeClass("active"); //Remove any "active" class
    jQuery(this).addClass("active"); //Add "active" class to selected tab
    jQuery("#property-info .tab_content").hide(); //Hide all tab content
    var activeTab = jQuery(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    jQuery(activeTab).fadeIn(); //Fade in the active ID content
    return false;

Tab for the map is the 2nd one. When I click on it following map outputs as shown in the picture. What is the problem? I need it asap. Thanks in advance for any guidance.

Problem Demonstration


Unfortunately there is no easy fix for this, I tried this myself a while ago, and ended up not using any tabs for map rendering since it was the only reliable option.

I had some success with messing about with CSS but all browsers (and mobile) reacted differently.

The reason is Google maps computes it's values on page load, there are some hacky solutions here. https://stackoverflow.com/questions/1428178/problems-with-google-maps-api-v3-jquery-ui-tabs

  • How about using an IFRAME but this will be needing to create an additional page which is not an efficient way for a big website like portals. Is there any way of using above mentioned plugin function 'echo mymap->display(array("directions"=>"none"));' in the src of IFRAME?
    – booota
    Sep 6 '11 at 13:24

Using an IFrame inside the tab is an easy fix for this. I contacted the Mappress author and he is currently working on it and the next update will be working with jquery tabs (as he told me).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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