Difference between revisions of "How can I show the Map inside a tab"
From JReviews Documentation
| Line 12: | Line 12: | ||
</source> | </source> | ||
| + | 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: | ||
| − | + | <source lang="php"> | |
| + | <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> | ||
| + | </source> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Revision as of 00:17, 31 January 2011
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>