How can I show the Map inside a tab

From JReviews Documentation
Revision as of 00:17, 31 January 2011 by Alejandro (Talk | contribs)

Jump to: navigation, search

Read the article about Adding tabs to listing detail page.

To show the map inside a tab move the code that outputs the Map in the detail.thtml theme file into one of the tabs.

<!--  BEGIN MAP -->
<?php if(isset($listing['Geomaps']) && $listing['Geomaps']['lat']!='' && $listing['Geomaps']['lon']!=''):?>
<div class="clear"></div>
<?php echo $this->renderControllerView('geomaps','map_detail',array('width'=>'100%','height'=>'300'));?>
<?php endif;?>
<!--  END MAP -->

There is an issue when the Map is loaded in a hidden tab and a portion of the map is rendered in grey. To fix this you can modify the code used in assets.php like this:


<script type="text/javascript">
jQuery(document).ready(function() 
{
	jreviews.lightbox();
	<?php if($addReviewCheck): // Init tooltips for reviews ?>
	jreviews.tooltip();
	<?php endif;?>
	<?php if($addReviewCheck && $datePickerCheck): // Init datepicker for review fields?>
	jreviews.datepicker();
	<?php endif;?>   
        // Add lines below
	jQuery("#jr_tabs").tabs().bind('tabsshow', function(event, ui) {
            if (ui.panel.id == "map") { 
               /*"map" is the id of the div used for the map tab*/
                var jrMap = GeomapsDetail.getMap();
  		jrMap.checkResize();
             } 
        });   	
});
</script>