- 2008年5月23日 12:18
- Movable Type
仕様は、新規ブログ作成ページから、建物名、住所、概要、写真を入力すると、個別のブログ詳細ページにマーカーのほか、吹き出し（建物名、概要、写真）付きのGoogleMapが表示されるというもの。
【カスタムフィールドの作成】
- 必要な入力欄を更新ページに設けるため、カスタムフィールドを作成する。管理画面→設定→カスタムフィールド→フィールドを作成（タイトルすぐ下）
- システムオブジェクトでは、これから機能を拡張するものを選択。ここでは「ブログ記事」。
- フィールド（欄）の名前、説明（注意書き、空白も可）、種類（テキスト、概要にはテキスト複数行、写真には画像）を入力
- 必須、既定値、ベースネームは飛ばして、テンプレートタグにはアルファベットで名前が既存のものでないよう、且つ被らないよう注意して入力。この値をＤＢに新たに登録する（ものと思われる）。
- 以上の入力が終わったら保存。この後、フィールドの数だけ同じことを繰り返す。再構築して完了。管理画面よりブログ記事の編集か新規作成を立ち上げ、右上にある表示オプションで、先ほど作成したカスタムフィールドにチェックを入れる。更新すれば、ブログ記事編集に反映される。
【GoogleMapをテンプレートに組み込み】
- GoogleMapよりAPI keyを取得（画面下部にある「My web site URL」にＵＲＬを入力して、「GENERATE API key」をクリック）
- 管理画面「テンプレートモジュール」→「ブログ記事の詳細」で、「<MTIfNonEmpty tag="EntryMore">」の直前に以下のコードを挿入。（マップサイズは調整可）
<div id="map" style="width:600px;height:500px;"></div>
<blockquote>
<p>物件名 ：<$MTentryshopname$></p>
<MTIfNonEmpty tag="entryshopaddress">
<p>物件住所：<$MTentryshopaddress$></p>
</MTIfNonEmpty>
<MTIfNonEmpty tag="entyshopdetail">
<p>物件概要：<$MTentryshopdetail remove_html="1"$></p>
</MTIfNonEmpty$>
</blockquote>
- 「アーカイブテンプレート」→「ブログ記事」。「<MTSetVarBlock name="page_id">entry<$MTEntryID pad="1"$></MTSetVarBlock>」の直後に以下のコードを挿入。（マップサイズは調整可）
<MTSetVarBlock name="html_head">
<MTEntryPrevious><link rel="prev" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" /></MTEntryPrevious>
<MTEntryNext><link rel="next" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" /></MTEntryNext>
<meta name="description" content="<$MTEntryExcerpt$>" />
<MTIfNonEmpty tag="MTEntryKeywords"><meta name="keywords" content="<$MTEntryKeywords encode_html="1"$>" /></MTIfNonEmpty>
<MTIfCommentsAccepted><script type="text/javascript" src="<$MTLink template="javascript"$>"></script></MTIfCommentsAccepted><MTIfNonEmpty tag="entryshopaddress"><script src="http://maps.google.com/maps?file=api&v=2&key=サイトのＡＰＩキー" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var geocoder = null;
var mapinfo = "<h3 calss=\"shopname\" style=\"width:300px;\"><$MTentryshopname encode_js="1"$></h3><MTIfNonEmpty tag="entryshopimage"><p class=\"shopimage\" style=\"width:300px;\"><MTEntryShopImageAsset><$MTAssetThumbnailLink width="200" encode_js="1"$></MTEntryShopImageAsset></p></MTIfNonEmpty><MTIfNonEmpty tag="entryshopdetail"><p class=\"shopdetail\" style=\"width:300px;\"><$MTentryshopdetail remove_html="1" remove_html="1" encode_js="1"$></p></MTIfNonEmpty>";
var shopaddress = "<$MTentryshopaddress encode_js="1"$>";
function showAddress(address) {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
geocoder = new GClientGeocoder();
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert("入力した住所が見つかりません。");
} else {
map.clearOverlays();
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl(new GSize(200,150)));
map.setCenter(point, 15);
var marker = new GMarker(point);
map.addOverlay(marker);
map.openInfoWindowHtml(map.getCenter(), mapinfo);
}
}
);
}
}
}function initial_load() {
showAddress(shopaddress);
<MTIfCommentsAccepted>individualArchivesOnLoad(commenter_name);</MTIfCommentsAccepted>
}
//]]>
</script>
<$MTSetVar name="body_onload" value="initial_load();"$>
</MTIfNonEmpty>
- 上記のコードでは最後から２番目の行でJavaScript「initial_load()」を呼び出すための変数が「body_onload」に渡されているが、「<body>」が記載されているテンプレートモジュール「ヘッダー」のデフォルトには（多分）ないので、以下のコードを「<body>」タグ内部に追加（あれば、必要なし）。
<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>
- Newer: トップページ表示を最新の１件に
- Older: ウェブページ