How can I show the Map inside a tab
From JReviews Documentation
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(); GeomapsDetail.centerAndZoomOnBounds(); // Re-center marker } }); }); </script>