EC-CUBE2.12：当サイトについて　最寄り駅から店舗までの道筋を示す

1　パラメータ設定で、使用するかしないかを設定できるようにする。0を設定すると、デフォルトの表示方法になる。

INSERT INTO mtb_constants (id, name, rank, remarks) VALUES ('ABOUT_MAP', '"東京都霞ヶ関駅"', 1430, '当サイトについての地図に最寄り駅等からの道筋を表示する場合は、駅名等を入力する。　例） "東京都霞ヶ関駅"　【注意】""で囲む　　表示しない場合は、0 を入力する。');

★パラメータ設定を開き、「この内容で登録する」をクリックする。

2　■　data/Smarty/templates/default/abouts/index.tpl
IE7では表示されないので、条件分岐を挿入。

<!--{if $objSiteInfo->data.latitude && $objSiteInfo->data.longitude}-->
<!--{if $smarty.const.ABOUT_MAP != "" && $smarty.server.HTTP_USER_AGENT|regex_replace:'/.*MSIE 6.*/i':'MSIE 6' != 'MSIE 6' &&  $smarty.server.HTTP_USER_AGENT|regex_replace:'/.*MSIE 7.*/i':'MSIE 7' != 'MSIE 7'}-->
<script type="text/javascript">//<![CDATA[
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

window.onload = function(){

var option = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
streetViewControl: true
}

var map = new google.maps.Map(document.getElementById('map'), option);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));

getRoute();
document.getElementById('from').onchange = getRoute;
}

function getRoute(){

var from = document.getElementById('from').value;

var request = {
origin: from,
destination: "<!--{$objSiteInfo->data.latitude}-->,<!--{$objSiteInfo->data.longitude}-->",
travelMode: google.maps.DirectionsTravelMode.DRIVING,
optimizeWaypoints: true,//最適化された最短距離にする。
};

directionsService.route(request, function(response, status){
if(status == google.maps.DirectionsStatus.OK){
directionsDisplay.setDirections(response);
}
});
}
//]]>
</script>

<!--{else}-->

<script type="text/javascript">//<![CDATA[
$(function() {
$("#maps").css({
'margin-top': '15px',
'margin-left': 'auto',
'margin-right': 'auto',
'width': '98%',
'height': '300px'
});
var lat = <!--{$objSiteInfo->data.latitude}-->
var lng = <!--{$objSiteInfo->data.longitude}-->
if (lat && lng) {
var latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#maps").get(0), mapOptions);
var marker = new google.maps.Marker({map: map, position: latlng});
} else {
$("#maps").remove();
}
});
//]]></script>
<!--{/if}-->
<!--{/if}-->

<div id="undercolumn">

<div id="undercolumn_aboutus">
<h2 class="title"><!--{$tpl_title|h}--></h2>

<table summary="当サイトについて">
<col width="20%" />
<col width="80%" />
<!--{if strlen($objSiteInfo->data.shop_name)}-->
<tr>
<th>店名</th>
<td><!--{$objSiteInfo->data.shop_name|h}--></td>
</tr>
<!--{/if}-->

<!--{if strlen($objSiteInfo->data.company_name)}-->
<tr>
<th>会社名</th>
<td><!--{$objSiteInfo->data.company_name|h}--></td>
</tr>
<!--{/if}-->

<!--{if strlen($objSiteInfo->data.zip01)}-->
<tr>
<th>所在地</th>
<td>〒<!--{$objSiteInfo->data.zip01|h}-->-<!--{$objSiteInfo->data.zip02|h}--><br /><!--{$objSiteInfo->data.pref|h}--><!--{$objSiteInfo->data.addr01|h}--><!--{$objSiteInfo->data.addr02|h}--></td>
</tr>
<!--{/if}-->

<!--{if strlen($objSiteInfo->data.tel01)}-->
<tr>
<th>電話番号</th>
<td><!--{$objSiteInfo->data.tel01|h}-->-<!--{$objSiteInfo->data.tel02|h}-->-<!--{$objSiteInfo->data.tel03|h}--></td>
</tr>
<!--{/if}-->

<!--{if strlen($objSiteInfo->data.fax01)}-->
<tr>
<th>FAX番号</th>
<td><!--{$objSiteInfo->data.fax01|h}-->-<!--{$objSiteInfo->data.fax02|h}-->-<!--{$objSiteInfo->data.fax03|h}--></td>
</tr>
<!--{/if}-->

<!--{if strlen($objSiteInfo->data.email02)}-->
<tr>
<th>メールアドレス</th>
<td><a href="mailto:<!--{$objSiteInfo->data.email02|escape:'hex'}-->"><!--{$objSiteInfo->data.email02|escape:'hexentity'}--></a></td>
</tr>
<!--{/if}-->

<!--{if strlen($objSiteInfo->data.business_hour)}-->
<tr>
<th>営業時間</th>
<td><!--{$objSiteInfo->data.business_hour|h}--></td>
</tr>
<!--{/if}-->

<!--{if strlen($objSiteInfo->data.good_traded)}-->
<tr>
<th>取扱商品</th>
<td><!--{$objSiteInfo->data.good_traded|h|nl2br}--></td>
</tr>
<!--{/if}-->

<!--{if strlen($objSiteInfo->data.message)}-->
<tr>
<th>メッセージ</th>
<td><!--{$objSiteInfo->data.message|h|nl2br}--></td>
</tr>
<!--{/if}-->

</table>

<!--{if $smarty.const.ABOUT_MAP != "" && $smarty.server.HTTP_USER_AGENT|regex_replace:'/.*MSIE 6.*/i':'MSIE 6' != 'MSIE 6' &&  $smarty.server.HTTP_USER_AGENT|regex_replace:'/.*MSIE 7.*/i':'MSIE 7' != 'MSIE 7'}-->
<div id="text1">
出発地に，住所や施設名を入力して「表示」をクリックすると，<!--{$objSiteInfo->data.shop_name|h}-->までのルートが表示されます。<br>
表示されないときは，別の名前で試してください。
</div>
<div class="controller">
【出発地：A】 <input type="text" id="from" value="<!--{$smarty.const.ABOUT_MAP}-->" /><span id="hyoji">表示</span>
【目的地：B】 <strong><!--{$objSiteInfo->data.shop_name|h}--></strong>
</div>
<div class="container">
<div id="map"></div>
<div id="panel"></div>
<br class="clear" />
</div>
<!--{else}-->
<div id="maps"></div>
<!--{/if}-->

</div>
</div>

3　■html/user_data/packages/default/css/contents.css


/* ◎◎について
----------------------------------------------- */
div#undercolumn_aboutus {
}

↓（変更）

/* 当サイトについて
----------------------------------------------- */
#undercolumn_aboutus {
}
div#undercolumn_aboutus #text1 {
padding-left:27px;
background:url(../img/background/contribute_bg.png) no-repeat left top;
margin-bottom:15px;
}
div#undercolumn_aboutus .controller{
margin-bottom:10px;
padding:1em;
background: #EFB450;
color:#000;
}
div#undercolumn_aboutus .controller input{
width:12em;
margin-right:1em;
}
div#undercolumn_aboutus .container{
border:1px solid #cccccc;
background:url(../img/background/ajax-loader.gif) no-repeat center center;
}
div#undercolumn_aboutus #map{
float:left;
width:550px;
height:400px;
}
div#undercolumn_aboutus #panel{
margin-left:550px;
width:192px;
padding:0 10px;
height:400px;
overflow:auto;
background: #EFB450;
margin-bottom:-20px;
}
/*▼3カラム対応*/
#three_maincolumn div#undercolumn_aboutus #map{
width:403px;
}
#three_maincolumn div#undercolumn_aboutus #panel{
margin-left:403px;
width:152px;
}
/*▲3カラム対応*/
div#undercolumn_aboutus #panel table {
border:none;
}
#panel .adp-placemark{
background: #E14F00;
border:none;
color:#ffffff;
font-weight:bold;
}
#panel .adp-summary{
text-align:right;
}
#panel .adp-directions tr:hover{
background: #630;
color:#FFF;
}
#panel .adp-directions td{
padding:0.5em 0.2em;
border:dotted #fff;
border-width:1px 0;
}
#panel .adp-directions b{
font-weight:normal;
color: #C00;
}
#panel .adp-directions .adp-distance{
font-weight:bold;
}
#panel .adp-legal{
text-align:right;
color:#fff;
}

div#undercolumn_aboutus br.clear{
clear:left;
font-size:0;
}
div#undercolumn_aboutus #hyoji {
padding:2px 5px 0 5px;
background-color:#FFF;
border:#333 1px solid;
cursor:pointer;
color:#333;
}
div#undercolumn_aboutus #hyoji:hover {
background-color: #F90;
}