ホーム > フォーラム > 質問箱 > XCL2.2(Pack 2012) > theme.htmlファイルを編集して内部ファイルを参照したい

theme.htmlファイルを編集して内部ファイルを参照したい
投稿者: enagii | 投稿日時: 2013/10/3 9:47 | 閲覧: 8205回
enagii

初めて投稿します、enagiiと申します。

使用環境

【XOOPSバージョン】XOOPS Cube Legacy 2.2.2(Pack2012)


【サーバー】お名前.comの共有サーバー


【PHPバージョン】5.2.17


【MySQLのバージョン】5.0.51a-log


【Apache】2.2.23


【やりたいこと】
theme.htmlを編集して中央ブロックに地図を表示させて色々したい


【今起こっている・改善したい問題】
themes/ ディレクトリからの自動アップデートを有効にするにチェックを入れて

GoogleMapAPI v3を使用しています。

javascriptファイルを作ってそれを参照させたいのですが、

theme.htmlを同じ場所においてもなぜかファイルが参照されず地図が表示できませんでした

今は指定されているURLを使って参照するか、html内にscriptを書いてどうにかしています。

これからどんどんデータが膨大になっていくことを考えていくとscriptファイルを作って管理したいのです。



モジュールを使って地図を表示させることも検討したのですがうまく行かず現在の方法で地図をサイトに表示させようと思っています。

どなたかご教授お願いしますorz

コメント(4)

Re: theme.htmlファイルを編集して内部ファイルを参照したい 
投稿者: enagii | 投稿日時: 2013/10/3 12:26
enagii

【実際のコード】
<script src="test.js"></script>

と書いても参照されずスルーされてます
Re: theme.htmlファイルを編集して内部ファイルを参照したい 
投稿者: nao-pon | 投稿日時: 2013/10/3 23:41
nao-pon

enagii さん、こんにちは。

外部 JavaScript ファイルへのパスが通っていないのが原因だと思います。

XOOPS 上のテンプレート中では、<{$xoops_url}> という変数が XOOPS_URL を示していますので、それを使って絶対パスにして指定するとよいと思います。

<script type="javascript" src="<{$xoops_url}>/themes/theme_name/ext_script.js"></script>

といった感じです。お試し下さい。
#21332 | | 返信する |
Re: theme.htmlファイルを編集して内部ファイルを参照したい 
投稿者: enagii | 投稿日時: 2013/10/4 11:05 | 親コメント: #21332
enagii

nao-ponさん、こんにちは

返信ありがとうございます。


これのとおりに

<script type="text/javascript" src="<{$xoops_url}>/theme/r_simple_red/backGmap.js">

と書きましたが改善せず。


jsのコード載せます
//declare namespace
var Pworld = {};

//declare map
var map;

//set the drawing manager
var drawingManager;

function trace(message)
{
if (typeof console != 'undefined')
{
console.log(message);
}
}

//Function that gets run when the document loads
Pworld.initialize = function()
{
var latlng = new google.maps.LatLng(35.6740318537907, 139.73236083984375);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//描画ツール追加
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.MARKER]
},
markerOptions: {
// icon: new google.maps.MarkerImage('bus.png'), //マーカーの画像指定
draggable: true
}
});

//マップにツール追加
drawingManager.setMap(map);

//イベントリスナーはユーザーの次に次の処理を行い?、地図上にポイントを描画
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (point)
{
//"clone"に情報ウィンドウを入れる
var form = $(".save-form").clone().show();
var infowindow_content = form[0];
var infowindow = new google.maps.InfoWindow({
content: infowindow_content
});

//各マーカーをクリック可能にする
google.maps.event.addListener(point.overlay, 'click', function() {
infowindow.open(map,point.overlay);
});

//デフォルトの動作(情報ウィンドウ)
infowindow.open(map,point.overlay);

//"submit"ボタンをユーザーがクリックするとき
form.submit({point: point}, function (event) {
//デフォルトのフォームの動作(ページを更新するであろう)を防ぐ
event.preventDefault();

//"data"オブジェクト内のすべてのフォーム要素を入れて
var data = {
url: $("input[url=url]", this).val(),
lat: event.data.point.overlay.getPosition().lat(),
lon: event.data.point.overlay.getPosition().lng()
};
trace(data);

//データベースにポイントを追加してPHPスクリプトに結果を送信
$.post("<{$xoops_url}>/xoops/themes/r_simple_red/adddata.php", data, Pworld.saveStopResponse, "json");

//フォームを消去して、新しいメッセージで置き換え
infowindow.setContent(data);
return false;
});
});
};
申し訳ありません 
投稿者: enagii | 投稿日時: 2013/10/4 15:37 | 親コメント: #21333
enagii

自己解決しました。

参照は教えてもらったコードを自分の環境に合わせて変えて、

theme.html内で変数のスペルが違うか足りないかで地図が表示できていないだけでした。

ご迷惑をお掛けしました。

nao-ponさん、ありがとうございました。

    投票(0)

    新しいものから | 古いものから | RSS feed
     
    To Top