PDA

View Full Version : Map in listing details tab



Abdulaziz Ali
February 14, 2014, 01:11 PM
Hi,

I'm looking to have the google map in the listing details tab instead of having it in isolated tab.

I tried to cut the below code from listing_details.tpl


<!-- map -->
{if $config.map_module && $location}
<div id="area_map" class="tab_area hide">
<div class="highlight">
<div id="map" style="width: {if empty($config.map_width)}100%{else}{$config.map_wi dth}px{/if}; height: {if empty($config.map_height)}300px{else}{$config.map_ height}px{/if}"></div>
</div>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false{if $smarty.const.RL_LANG_CODE != '' && $smarty.const.RL_LANG_CODE != 'en'}&amp;language={$smarty.const.RL_LANG_CODE}{/if}"></script>
<!--script type="text/javascript" src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key={$config.google_map_key}"></script-->
<script type="text/javascript" src="{$smarty.const.RL_LIBS_URL}jquery/jquery.flmap.js"></script>
<script type="text/javascript">//<![CDATA[
{literal}

var map_exist = false;
$(document).ready(function(){
$('div.tabs li').click(function(){
if ( !map_exist && $(this).attr('id') == 'tab_map' )
{
$('#map').flMap({
addresses: [
[{/literal}'{if $location.direct}{$location.direct}{else}{$locatio n.search}{/if}', '{$location.show}', '{if $location.direct}direct{else}geocoder{/if}'{literal}]
//['Tamiami, FL', 'Tamiami!', 'geocoder']
//['-25.363882,131.044922', 'Direct']
],
phrases: {
hide: '{/literal}{$lang.hide}{literal}',
show: '{/literal}{$lang.show}{literal}',
notFound: '{/literal}{$lang.location_not_found}{literal}'
},
zoom: {/literal}{$config.map_default_zoom}{if $config.map_amenities && $amenities},{literal}
localSearch: {
caption: '{/literal}{$lang.local_amenity}{literal}',
services: [{/literal}
{foreach from=$amenities item='amenity' name='amenityF'}
['{$amenity.Key}', '{$amenity.name}', {if $amenity.Default}'checked'{else}false{/if}]{if !$smarty.foreach.amenityF.last},{/if}
{/foreach}
{literal}]
}
{/literal}{/if}{literal}
});
map_exist = true;
}
});
});

{/literal}
//]]>
</script>
</div>
{/if}
<!-- map end -->


and paste it under the below code but teh map disappeared. Also, it might give me errors that "hospital" couldn't find in the map!

<div id="area_listing" class="tab_area">



Also, i tried to remove "hide" from the class "tab_area hide" but it doesnt work

Viktor
February 15, 2014, 10:15 AM
Hello Abdulaziz,

please use this code:



<!-- map -->
{if $config.map_module && $location}
<div id="area_map" class="tab_area hide">
<div class="highlight">
<div id="map" style="width: {if empty($config.map_width)}100%{else}{$config.map_wi dth}px{/if}; height: {if empty($config.map_height)}300px{else}{$config.map_ height}px{/if}"></div>
</div>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false{if $smarty.const.RL_LANG_CODE != '' && $smarty.const.RL_LANG_CODE != 'en'}&amp;language={$smarty.const.RL_LANG_CODE}{/if}"></script>
<!--script type="text/javascript" src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key={$config.google_map_key}"></script-->
<script type="text/javascript" src="{$smarty.const.RL_LIBS_URL}jquery/jquery.flmap.js"></script>
<script type="text/javascript">//<![CDATA[
{literal}

var map_exist = false;
$(document).ready(function(){
if ( !map_exist )
{
$('#map').flMap({
addresses: [
[{/literal}'{if $location.direct}{$location.direct}{else}{$locatio n.search}{/if}', '{$location.show}', '{if $location.direct}direct{else}geocoder{/if}'{literal}]
//['Tamiami, FL', 'Tamiami!', 'geocoder']
//['-25.363882,131.044922', 'Direct']
],
phrases: {
hide: '{/literal}{$lang.hide}{literal}',
show: '{/literal}{$lang.show}{literal}',
notFound: '{/literal}{$lang.location_not_found}{literal}'
},
zoom: {/literal}{$config.map_default_zoom}{if $config.map_amenities && $amenities},{literal}
localSearch: {
caption: '{/literal}{$lang.local_amenity}{literal}',
services: [{/literal}
{foreach from=$amenities item='amenity' name='amenityF'}
['{$amenity.Key}', '{$amenity.name}', {if $amenity.Default}'checked'{else}false{/if}]{if !$smarty.foreach.amenityF.last},{/if}
{/foreach}
{literal}]
}
{/literal}{/if}{literal}
});
map_exist = true;
}
});

{/literal}
//]]>
</script>
</div>
{/if}
<!-- map end -->


I think it should work for now. :)

Abdulaziz Ali
February 15, 2014, 05:33 PM
works like a charm.

I just removed the class ("tab_area hide") from your code and it works with no issues so far


Thanks Viktor