EC-CUBE（その７）GoogleMapを表示する
当サイトについてに地図を表示してみたいという方、いかがおすごしでしょうか？
以下簡単にメモしておきます。
前回、基本情報管理のSHOPマスタの登録について記述しました。せっかくなので、このSHOPマスタから緯度・経度を登録できるようにしてみます。
１．データベースに項目追加
dtb_baseinfoにlatitude・longitudeというカラムを追加してください。
alter table dtb_baseinfo add latitude decimal(9, 6); alter table dtb_baseinfo add longitude decimal(9, 6);
２．管理画面の編集
前回同様、SHOPマスタを登録する管理画面のテンプレートファイルを変更します。
ここに以下のソースを追加してください。管理画面に緯度・経度が登録できるテキストボックスが表示されるはずです。
<tr> <td bgcolor="#f2f1ec" width="180" class="fs12n">緯度</td> <td bgcolor="#ffffff" width="537" class="fs10n"> <span class="red12"><!--{$arrErr.latitude}--></span> <input type="text" name="latitude" value="<!--{$arrForm.latitude|escape}-->" maxlength="<!--{$smarty.const.SSTEXT_LEN}-->" size="10" class="box10" style="<!--{if $arrErr.latitude != ""}-->background-color: <!--{$smarty.const.ERR_COLOR}--><!--{/if}-->"/> <span class="red"> （上限<!--{$smarty.const.SSTEXT_LEN}-->文字）</span> </td> </tr> <tr> <td bgcolor="#f2f1ec" width="180" class="fs12n">経度</td> <td bgcolor="#ffffff" width="537" class="fs10n"> <span class="red12"><!--{$arrErr.longitude}--></span> <input type="text" name="longitude" value="<!--{$arrForm.longitude|escape}-->" maxlength="<!--{$smarty.const.SSTEXT_LEN}-->" size="10" class="box10" style="<!--{if $arrErr.longitude != ""}-->background-color: <!--{$smarty.const.ERR_COLOR}--><!--{/if}-->"/> <span class="red"> （上限<!--{$smarty.const.SSTEXT_LEN}-->文字）</span> </td> </tr>
ここでinputタグにclass="box10"と設定しているので、CSSに新たにbox10を追加します。以下のファイルです。
div#windowarea .box10 { width: 10px; padding: 2px; border: 1px solid #ccc; }
さらに{$smarty.const.SSTEXT_LEN}と定義しているので、以下のファイルに定数に追加します。だいたい342行目あたりにしました。
define('SSTEXT_LEN', 10);
ただ、このファイルは管理画面のシステム設定のパラメータ設定を変更したら上書きされてしまいます。対処方法はまたあとで見つけます…
３．データベースへの登録
前回同様データベースに書き込めるよう変更します。対象となるのは以下のファイルになります。
- \data\class_extends\page_extends\admin\basis\LC_Page_Admin_Basis_Ex.php
<?php /* * This file is part of EC-CUBE * * Copyright(c) 2000-2007 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ // {{{ requires require_once(CLASS_PATH . "pages/admin/basis/LC_Page_Admin_Basis.php"); /** * 店舗基本情報 のページクラス(拡張). * * LC_Page_Admin_Basis をカスタマイズする場合はこのクラスを編集する. * * @package Page * @author LOCKON CO.,LTD. * @version $Id: LC_Page_Admin_Basis_Ex.php 16741 2007-11-08 00:43:24Z adachi $ */ class LC_Page_Admin_Basis_Ex extends LC_Page_Admin_Basis { // }}} // {{{ functions /** * Page を初期化する. * * @return void */ function init() { parent::init(); } /** * Page のプロセス. * * @return void */ function process() { parent::process(); } // 基本情報用のカラムを取り出す。 function lfGetCol() { // 基本クラスでカラムを取得 $arrCol = parent::lfGetCol(); // 今回追加したカラムを取得 $arrCol[] = "latitude"; $arrCol[] = "longitude"; return $arrCol; } /* 取得文字列の変換 */ function lfConvertParam($array) { /* * 文字列の変換 * K : 「半角(ﾊﾝｶｸ)片仮名」を「全角片仮名」に変換 * C : 「全角ひら仮名」を「全角かた仮名」に変換 * V : 濁点付きの文字を一文字に変換。"K","H"と共に使用します * n : 「全角」数字を「半角(ﾊﾝｶｸ)」に変換 * a : 全角英数字を半角英数字に変換する */ // 基本クラスでの変換 parent::lfConvertParam($array); // 拡張クラスでの変換 $arrConvList['latitude'] = "n"; $arrConvList['longitude'] = "n"; return SC_Utils_Ex::mbConvertKanaWithArray($array, $arrConvList); } // 入力エラーチェック function lfErrorCheck($array) { $objErr = new SC_CheckError($array); $objErr->doFunc(array("会社名", "company_name", STEXT_LEN), array("MAX_LENGTH_CHECK")); $objErr->doFunc(array("会社名(カナ)", "company_kana", STEXT_LEN), array("KANA_CHECK","MAX_LENGTH_CHECK")); $objErr->doFunc(array("店名", "shop_name", STEXT_LEN), array("EXIST_CHECK","MAX_LENGTH_CHECK")); $objErr->doFunc(array("店名(カナ)", "shop_kana", STEXT_LEN), array("KANA_CHECK","MAX_LENGTH_CHECK")); // 郵便番号チェック $objErr->doFunc(array("郵便番号1","zip01",ZIP01_LEN ) ,array("EXIST_CHECK", "NUM_CHECK","NUM_COUNT_CHECK")); $objErr->doFunc(array("郵便番号2","zip02",ZIP02_LEN ) ,array("EXIST_CHECK", "NUM_CHECK","NUM_COUNT_CHECK")); $objErr->doFunc(array("郵便番号", "zip01", "zip02"), array("ALL_EXIST_CHECK")); // 住所チェック $objErr->doFunc(array("都道府県", "pref"), array("EXIST_CHECK")); $objErr->doFunc(array("住所1", "addr01", STEXT_LEN), array("EXIST_CHECK", "MAX_LENGTH_CHECK")); $objErr->doFunc(array("住所2", "addr02", STEXT_LEN), array("EXIST_CHECK", "MAX_LENGTH_CHECK")); $objErr->doFunc(array("緯度", "latitude", SSTEXT_LEN), array("NUM_POINT_CHECK")); $objErr->doFunc(array("経度", "longitude", SSTEXT_LEN), array("NUM_POINT_CHECK")); // メールチェック $objErr->doFunc(array('商品注文受付メールアドレス', "email01", STEXT_LEN) ,array("EXIST_CHECK", "EMAIL_CHECK", "EMAIL_CHAR_CHECK", "MAX_LENGTH_CHECK")); $objErr->doFunc(array('問い合わせ受付メールアドレス', "email02", STEXT_LEN) ,array("EXIST_CHECK", "EMAIL_CHECK", "EMAIL_CHAR_CHECK", "MAX_LENGTH_CHECK")); $objErr->doFunc(array('メール送信元メールアドレス', "email03", STEXT_LEN) ,array("EXIST_CHECK", "EMAIL_CHECK", "EMAIL_CHAR_CHECK", "MAX_LENGTH_CHECK")); $objErr->doFunc(array('送信エラー受付メールアドレス', "email04", STEXT_LEN) ,array("EXIST_CHECK", "EMAIL_CHECK", "EMAIL_CHAR_CHECK","MAX_LENGTH_CHECK")); // 電話番号チェック $objErr->doFunc(array("TEL", "tel01", "tel02", "tel03", TEL_ITEM_LEN), array("TEL_CHECK")); $objErr->doFunc(array("FAX", "fax01", "fax02", "fax03", TEL_ITEM_LEN), array("TEL_CHECK")); // その他 $objErr->doFunc(array("消費税率", "tax", PERCENTAGE_LEN), array("EXIST_CHECK", "NUM_CHECK", "MAX_LENGTH_CHECK")); $objErr->doFunc(array("送料無料条件", "free_rule", PRICE_LEN), array("NUM_CHECK", "MAX_LENGTH_CHECK")); $objErr->doFunc(array("店舗営業時間", "business_hour", STEXT_LEN), array("MAX_LENGTH_CHECK")); $objErr->doFunc(array("取扱商品", "good_traded", LLTEXT_LEN), array("MAX_LENGTH_CHECK")); $objErr->doFunc(array("メッセージ", "message", LLTEXT_LEN), array("MAX_LENGTH_CHECK")); return $objErr->arrErr; } /** * デストラクタ. * * @return void */ function destroy() { parent::destroy(); } } ?>
数値が入るのはまずいので、エラーチェックも追加しました。めんどくさいんでオーバーライドしました。
４．GoogleMapの表示
やっとGoogleMapの表示させる段になりました。まずGoogleMapsAPIのKeyを取得します。
http://code.google.com/intl/ja/apis/maps/signup.html
僕はテストとしてlocalhostで使用するので、localhostで使用する以下のGoogleMapsAPIのKeyにしました。
- ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-4WZA27OwgbtyR3VcA
次にヘッダー部分の記述です。以下のテンプレートファイルに先ほど取得したGoogleMapsAPIのKeyに差し替えたソースを、bodyタグより前に記述してください。
<script src="http://maps.google.com/maps?file=api&v=2&key=取得したGoogleMapsAPIのKey" type="text/javascript" charset="utf-8"> </script>
そして次は当サイトについてのテンプレートファイルです。ここにGoogleMapを表示させたいので、tableタグに一行追加する形としました。
<!--{if strlen($_site.latitude) && strlen($_site.longitude)}--> <tr> <th>地図</th> <td><div id="map" style="width:300px; height:300px"></div></td> </tr> <!--{/if}-->
さらに、同じファイルの一番下のdivタグより外でいいので、以下のソースを追加してください。
<script type="text/javascript" charset="utf-8"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); var point = new GLatLng(<!--{$_site.latitude}-->, <!--{$_site.longitude}-->); var marker = new GMarker(point); map.setCenter(point, 15); map.addOverlay(marker); } //]]> </script>
表示されたでしょうか？基本的にEC-CUBEのファイルはUTF-8なので、大丈夫だと思いますが、万が一ファイルの文字形式がShift-JISになっている場合は表示されないみたいなので、エディタで文字形式を変更してください。
また、divタグの下に追加したjavascriptですが、ヘッダー部分に記述すると「オブジェクトがありません」か何かのエラーになってしまうので、必ず使用したいテンプレートファイルに記述してください。僕は同一ファイルでないと動きませんでした。
これで地図を自前で作成しなくても大丈夫です＼(^o^)／
