BLOG

Go to top


GoogleMap プラグインをアップデートしました

December 22, 2008 2:09 PM

この記事にはアップデートがあります。

GoogleMap プラグインをアップデートしました。申し訳ないのですがいくつか変更があるので、必ず以下を確認の上で使用してください。

変更点に関する概要

  • ブログごとに使えるようにしました。
  • 使用するかどうかはブログごとにプラグイン設定できるようにしました
  • テンプレートタグの変更

概要

MT 管理画面からのエントリー投稿および MTCS の外部からの投稿画面に、GoogleMap と GoogleMap ストリートビューを表示し、自動取得する座標を保存します。保存した座標は、ファンクションタグで取り出すことができます。

動作環境

Movable Type version 4.22-ja で動作確認しています。version 4 以降であれば動作するでしょう。コミュニティ・パックでも使えます。ただし、GoogleMap の表示にはブラウザの Javascript が有効になっている必要があります。

ダウンロード

GoogleMap プラグイン(約 8.3 kb)

インストール

解凍してできた GoogleMap/mt-static/plugins/GoogleMap フォルダを [MT を設置したディレクトリ]/mt-static/plugins 内に、GoogleMap/plugins/GoogleMap フォルダを [MT を設置したディレクトリ]/plugins 内に、それぞれそのままアップロードしてください。正しくアップロードできていれば、システム・メニューまたは各ブログのプラグイン設定画面に GoogleMap プラグインの項目が表示されます。

使い方

まず、こちら( Google Maps API 登録ページ )から GoogleMap API Key を取得し、Movable Type 管理画面の、システム・メニューのプラグイン設定「Google Map API Key.」にそのままコピーしてください。

次に、GoogleMap を使用したいブログのプラグイン設定画面で「GoogleMap を使用する」にチェックが入っていることを確認し(使用しないブログでは、このチェックを外してください)、「デフォルトの中心の座標」や「デフォルトのズームレベル」の項目を設定します。これらは、ブログ記事を投稿する時の標準設定になります(ファンクションタグで取り出すこともできます)。必要に応じて変更してください。デフォルトでは東京タワーの近辺になっています。ここまで完了したら、「変更を保存」ボタンで保存します。

使用できるタグ

以下のようなタグが使用できます。

条件タグ
<MTIfBlogUseGoogleMap>
このタグで囲まれた内容は、そのブログのプラグイン設定で「GoogleMap を使用する」にチェックが入っている場合のみ出力されます。
ファンクションタグ
<$MTGoogleMapApiKey$>
システムメニューのプラグイン設定で設定した GoogleMap API Key をそのまま出力します。
<$MTBlogGoogleMapDefaultLat$>
各ブログのプラグイン設定で設定した「デフォルトの中心の座標」の「緯度」をそのまま出力します。
<$MTBlogGoogleMapDefaultLon$>
各ブログのプラグイン設定で設定した「デフォルトの中心の座標」の「経度」をそのまま出力します。
<$MTBlogGoogleMapDefaultLevel$>
各ブログのプラグイン設定で設定した「デフォルトのズームレベル」をそのまま出力します。
<$MTCategoryGoogleMapLat$>
各カテゴリの編集画面で設定した「GoogleMap」の「緯度」をそのまま出力します。
<$MTCategoryGoogleMapLon$>
各カテゴリの編集画面で設定した「GoogleMap」の「経度」をそのまま出力します。
<$MTCategoryGoogleMapLevel$>
各カテゴリの編集画面で設定した「GoogleMap」の「ズームレベル」をそのまま出力します。
<$MTEntryGoogleMapLat$>
エントリー投稿の際に指定した「座標」の「緯度」をそのまま出力します。
<$MTEntryGoogleMapLon$>
エントリー投稿の際に指定した「座標」の「経度」をそのまま出力します。

テンプレートのカスタマイズ

次に、保存したデータを取り出せるようにテンプレートを変更します。まずはヘッダ部分に、GoogleMap を表示するための Javascript を埋め込みます。</head> の直前あたりに、以下のように埋め込みます。

<mt:Ignore><!--[GoogleMap]--></mt:Ignore>
<mt:IfBlogUseGoogleMap>
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=<$mt:GoogleMapApiKey$>" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
<mt:SetVarBlock name="center_lat"><mt:IfNonEmpty tag="EntryGoogleMapLat"><$mt:EntryGoogleMapLat$><mt:else><$mt:BlogGoogleMapDefaultLat$></mt:IfNonEmpty></mt:SetVarBlock>
<mt:SetVarBlock name="center_lon"><mt:IfNonEmpty tag="EntryGoogleMapLon"><$mt:EntryGoogleMapLon$><mt:else><$mt:BlogGoogleMapDefaultLon$></mt:IfNonEmpty></mt:SetVarBlock>
var mapId = "map";
var streetViewId = "view";
var map;
var view;

// show map
function mapLoad () {
    if (GBrowserIsCompatible()) {
        map = new GMap2( document.getElementById( mapId ) );
        map.setCenter( new GLatLng( <$mt:var name="center_lat"$>, <$mt:var name="center_lon"$> ), <$mt:BlogGoogleMapDefaultLevel$> );
        map.addControl( new GLargeMapControl() );
        
        // show cross
        var cross = document.createElement( "div" );
        var crossWidth = 23;	// cross width(img)
        var crossHeight = 23;	// cross height(img)
        var mapWidth = parseInt( map.getContainer().style.width );
        var mapHeight = parseInt( map.getContainer().style.height );
        var x = ( mapWidth - crossWidth ) / 2;	// cross center(x)
        var y = ( mapHeight - crossHeight ) / 2;  // cross center(y)
        cross.style.position = "absolute";
        cross.style.top = y+"px";
        cross.style.left = x+"px";
        cross.style.backgroundImage = "url( <$mt:staticwebpath$>plugins/GoogleMap/center.gif )";
        cross.style.width = crossWidth+"px";
        cross.style.height = crossHeight+"px";
        cross.style.opacity = 0.5;
        map.getContainer().appendChild(cross);
        viewLoad( <$mt:var name="center_lat"$>, <$mt:var name="center_lon"$> );
        
        // event listener
        GEvent.addListener( map, 'click', mapClickEvent );
        GEvent.addListener( map, 'move', mapMoveEvent );
    }
}

// show street view
function viewLoad() {
    targetPoint  = new GLatLng( <$mt:var name="center_lat"$>, <$mt:var name="center_lon"$> );
    panoramaOptions  = { latlng:targetPoint };
    view = new GStreetviewPanorama( document.getElementById( streetViewId ), panoramaOptions );
        
    // event listener
    GEvent.addListener( view, "error", handlePanoramaError );
    GEvent.addListener( view, "initialized", handleViewInitialized );
}

// map event
function mapInit( lat, lon ) {
    if ( ! lat ) {
        lat = <$mt:var name="center_lat"$>;
    }
    if ( ! lon ) {
        lon = <$mt:var name="center_lon"$>;
    }
    map.setCenter( lat, lon );
}

function mapMoveEvent() {
    var xy = map.getCenter();
    if ( document.getElementById( "lat" ) ) {
        document.getElementById( "lat" ).value = xy.lat();
    }
    if ( document.getElementById( "lon" ) ) {
        document.getElementById( "lon" ).value = xy.lng();
    }
    viewInit( xy.lat(), xy.lng() );
}

function mapClickEvent( overlay, point ){
    map.setCenter( point );
    view.setLocationAndPOV( point );
}

// street view event
function viewInit( lat, lon ) {
    if ( ! lat ) {
        lat = <$mt:var name="center_lat"$>;
    }
    if ( ! lon ) {
        lon = <$mt:var name="center_lon"$>;
    }
    targetPoint  = new GLatLng( lat, lon );
    view.setLocationAndPOV( targetPoint );
}

function handleViewInitialized( location ) {
    map.setCenter(location.latlng);
}
    
function handlePanoramaError( errorCode ) {
  if ( errorCode == 600 ) {
    document.getElementById( streetViewId ).innerHTML = '<p style="color:red;">You cannot use street view in this area.</p>';
    return;
  }
  if ( errorCode == FLASH_UNAVAILABLE ) {
    document.getElementById( streetViewId ).innerHTML = '<p style="color:red;">You cannnot use streew view by this browser.</p>';
    return;
  }
}
//]]>
</script>
</mt:IfBlogUseGoogleMap>
<mt:Ignore><!--/[GoogleMap]--></mt:Ignore>

さらに、画面の読み込み時に GoogleMap が表示されるように、body タグに以下の属性を埋め込みます。

onload="javascript:mapLoad();" onUnload="javascript:GUnload()"

デフォルトの MTCS の場合、グローバルテンプレートの「ヘッダー」テンプレートは以下のようになっているので、

<mt:SetVarBlock name="html_head" prepend="1">

    <mt:IfBlog>
        <mt:Ignore>
    <!-- Community Solution Blog variables -->
    <!-- The below variables are used when there a blog is in context.  -->
        </mt:Ignore>
        <mt:SetVarBlock name="blog_id"><$mt:BlogID$></mt:SetVarBlock>
        <mt:SetVarBlock name="blog_name"><$mt:BlogName encode_html="1"$></mt:SetVarBlock>
        <mt:SetVarBlock name="blog_description"><$mt:BlogDescription$></mt:SetVarBlock>
        <mt:SetVarBlock name="blog_url"><$mt:BlogURL$></mt:SetVarBlock>
        <mt:SetVarBlock name="profile_view_url"><$mt:CGIPath$><$mt:CommunityScript$>?__mode=view&amp;blog_id=<$mt:BlogID$>&amp;id=</mt:SetVarBlock>
        <link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
        <link rel="alternate" type="application/atom+xml" title="Atom" href="<$mt:Link template="feed_recent"$>" />
        <link rel="start" href="<$mt:BlogURL$>" title="Home" />
        <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
        <$mt:CCLicenseRDF$>
    <mt:Else>
        <mt:Ignore>
    <!-- Community Solution Static variables -->
    <!-- The below variables are used when there is no blog in context. Set them to defaults in the case that they are used w/o a blog context -->
        </mt:Ignore>
        <mt:SetVarBlock name="blog_name">ブログ名</mt:SetVarBlock>
        <mt:SetVarBlock name="blog_description">ブログの説明</mt:SetVarBlock>
        <mt:SetVarBlock name="blog_url">#</mt:SetVarBlock>
        <mt:SetVarBlock name="profile_view_url"><$mt:CGIPath$><$mt:CommunityScript$>?__mode=view&amp;blog_id=<$mt:BlogID$>&amp;id=</mt:SetVarBlock>
        <link rel="stylesheet" href="<$mt:StaticWebPath$>themes-base/blog.css" type="text/css" />
        <link rel="stylesheet" href="<$mt:StaticWebPath$>themes-base/forum.css" type="text/css" />
        <link rel="stylesheet" href="<$mt:StaticWebPath$>themes/tristan-blue-4.2/screen.css" type="text/css" />
        <script type="text/javascript" charset="utf-8"><$mt:Include module="GlobalJavaScript"$></script>
        <!-- END Community Solution Styles -->
    </mt:IfBlog>

</mt:SetVarBlock>

<mt:If tag="BlogTemplateSetID" eq="mt-community-forum"><$mt:Var name="page_layout" value="layout-wm"$></mt:If>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<$mt:BlogLanguage$>" lang="<$mt:BlogLanguage$>" id="sixapart-standard">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="imagetoolbar" content="no" />    
    <title><$mt:Var name="title"$></title>
    <meta name="generator" content="<$mt:ProductName version="1"$>" />
    <$mt:Var name="html_head"$>
    <mt:Ignore>
    <!-- Community Solution Scoring -->
    <!-- This updates any scoring controls on the page for the user who is signed-in. -->
    </mt:Ignore>
    <script type="text/javascript">
    /* <![CDATA[ */
    mtAttachEvent('load', mtUpdateScores);
    mtAttachEvent('usersignin', mtUpdateScores);
    /* ]]> */
    </script>
</head>
<body id="<$mt:BlogTemplateSetID$>" class="<$mt:Var name="body_class"$> <$mt:Var name="page_layout"$>">
    <div id="container">
        <div id="container-inner">
            <div id="header">
                <div id="header-inner">
                    <div id="header-content">
<mt:If name="main_index">
                        <h1 id="header-name"><a href="<$mt:Var name="blog_url"$>" accesskey="1"><$mt:Var name="blog_name"$></a></h1>
    <mt:If name="blog_description">
                        <h2 id="header-description"><$mt:Var name="blog_description"$></h2>
    </mt:If>
<mt:Else>
                        <div id="header-name"><a href="<$mt:Var name="blog_url"$>" accesskey="1"><$mt:Var name="blog_name"$></a></div>
    <mt:If name="blog_description">
                        <div id="header-description"><$mt:Var name="blog_description"$></div>
    </mt:If>
</mt:If>
                        <$mt:Include module="ナビゲーション"$>
                        <$mt:Include module="サインイン"$>
                        <$mt:Include module="検索"$>
                   </div>
                </div>
            </div>
            <div id="content">
                <div id="content-inner">
                    <div id="alpha">
                        <div id="alpha-inner">

これを、以下のように変更するとよいでしょう。

<mt:SetVarBlock name="html_head" prepend="1">

    <mt:IfBlog>
        <mt:Ignore>
    <!-- Community Solution Blog variables -->
    <!-- The below variables are used when there a blog is in context.  -->
        </mt:Ignore>
        <mt:SetVarBlock name="blog_id"><$mt:BlogID$></mt:SetVarBlock>
        <mt:SetVarBlock name="blog_name"><$mt:BlogName encode_html="1"$></mt:SetVarBlock>
        <mt:SetVarBlock name="blog_description"><$mt:BlogDescription$></mt:SetVarBlock>
        <mt:SetVarBlock name="blog_url"><$mt:BlogURL$></mt:SetVarBlock>
        <mt:SetVarBlock name="profile_view_url"><$mt:CGIPath$><$mt:CommunityScript$>?__mode=view&amp;blog_id=<$mt:BlogID$>&amp;id=</mt:SetVarBlock>
        <link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
        <link rel="alternate" type="application/atom+xml" title="Atom" href="<$mt:Link template="feed_recent"$>" />
        <link rel="start" href="<$mt:BlogURL$>" title="Home" />
        <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
        <$mt:CCLicenseRDF$>
    <mt:Else>
        <mt:Ignore>
    <!-- Community Solution Static variables -->
    <!-- The below variables are used when there is no blog in context. Set them to defaults in the case that they are used w/o a blog context -->
        </mt:Ignore>
        <mt:SetVarBlock name="blog_name">ブログ名</mt:SetVarBlock>
        <mt:SetVarBlock name="blog_description">ブログの説明</mt:SetVarBlock>
        <mt:SetVarBlock name="blog_url">#</mt:SetVarBlock>
        <mt:SetVarBlock name="profile_view_url"><$mt:CGIPath$><$mt:CommunityScript$>?__mode=view&amp;blog_id=<$mt:BlogID$>&amp;id=</mt:SetVarBlock>
        <link rel="stylesheet" href="<$mt:StaticWebPath$>themes-base/blog.css" type="text/css" />
        <link rel="stylesheet" href="<$mt:StaticWebPath$>themes-base/forum.css" type="text/css" />
        <link rel="stylesheet" href="<$mt:StaticWebPath$>themes/tristan-blue-4.2/screen.css" type="text/css" />
        <script type="text/javascript" charset="utf-8"><$mt:Include module="GlobalJavaScript"$></script>
        <!-- END Community Solution Styles -->
    </mt:IfBlog>

</mt:SetVarBlock>

<mt:If tag="BlogTemplateSetID" eq="mt-community-forum"><$mt:Var name="page_layout" value="layout-wm"$></mt:If>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<$mt:BlogLanguage$>" lang="<$mt:BlogLanguage$>" id="sixapart-standard">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="imagetoolbar" content="no" />    
    <title><$mt:Var name="title"$></title>
    <meta name="generator" content="<$mt:ProductName version="1"$>" />
    <$mt:Var name="html_head"$>
    <mt:Ignore>
    <!-- Community Solution Scoring -->
    <!-- This updates any scoring controls on the page for the user who is signed-in. -->
    </mt:Ignore>
    <script type="text/javascript">
    /* <![CDATA[ */
    mtAttachEvent('load', mtUpdateScores);
    mtAttachEvent('usersignin', mtUpdateScores);
    /* ]]> */
    </script>
<mt:IfBlog>

<mt:Ignore><!--[GoogleMap]--></mt:Ignore>
<mt:IfBlogUseGoogleMap>
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=<$mt:GoogleMapApiKey$>" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
<mt:SetVarBlock name="center_lat"><mt:IfNonEmpty tag="EntryGoogleMapLat"><$mt:EntryGoogleMapLat$><mt:else><$mt:BlogGoogleMapDefaultLat$></mt:IfNonEmpty></mt:SetVarBlock>
<mt:SetVarBlock name="center_lon"><mt:IfNonEmpty tag="EntryGoogleMapLon"><$mt:EntryGoogleMapLon$><mt:else><$mt:BlogGoogleMapDefaultLon$></mt:IfNonEmpty></mt:SetVarBlock>
var mapId = "map";
var streetViewId = "view";
var map;
var view;

// show map
function mapLoad () {
    if (GBrowserIsCompatible()) {
        map = new GMap2( document.getElementById( mapId ) );
        map.setCenter( new GLatLng( <$mt:var name="center_lat"$>, <$mt:var name="center_lon"$> ), <$mt:BlogGoogleMapDefaultLevel$> );
        map.addControl( new GLargeMapControl() );
        
        // show cross
        var cross = document.createElement( "div" );
        var crossWidth = 23;	// cross width(img)
        var crossHeight = 23;	// cross height(img)
        var mapWidth = parseInt( map.getContainer().style.width );
        var mapHeight = parseInt( map.getContainer().style.height );
        var x = ( mapWidth - crossWidth ) / 2;	// cross center(x)
        var y = ( mapHeight - crossHeight ) / 2;  // cross center(y)
        cross.style.position = "absolute";
        cross.style.top = y+"px";
        cross.style.left = x+"px";
        cross.style.backgroundImage = "url( <$mt:staticwebpath$>plugins/GoogleMap/center.gif )";
        cross.style.width = crossWidth+"px";
        cross.style.height = crossHeight+"px";
        cross.style.opacity = 0.5;
        map.getContainer().appendChild(cross);
        viewLoad( <$mt:var name="center_lat"$>, <$mt:var name="center_lon"$> );
        
        // event listener
        GEvent.addListener( map, 'click', mapClickEvent );
        GEvent.addListener( map, 'move', mapMoveEvent );
    }
}

// show street view
function viewLoad() {
    targetPoint  = new GLatLng( <$mt:var name="center_lat"$>, <$mt:var name="center_lon"$> );
    panoramaOptions  = { latlng:targetPoint };
    view = new GStreetviewPanorama( document.getElementById( streetViewId ), panoramaOptions );
        
    // event listener
    GEvent.addListener( view, "error", handlePanoramaError );
    GEvent.addListener( view, "initialized", handleViewInitialized );
}

// map event
function mapInit( lat, lon ) {
    if ( ! lat ) {
        lat = <$mt:var name="center_lat"$>;
    }
    if ( ! lon ) {
        lon = <$mt:var name="center_lon"$>;
    }
    map.setCenter( lat, lon );
}

function mapMoveEvent() {
    var xy = map.getCenter();
    if ( document.getElementById( "lat" ) ) {
        document.getElementById( "lat" ).value = xy.lat();
    }
    if ( document.getElementById( "lon" ) ) {
        document.getElementById( "lon" ).value = xy.lng();
    }
    viewInit( xy.lat(), xy.lng() );
}

function mapClickEvent( overlay, point ){
    map.setCenter( point );
    view.setLocationAndPOV( point );
}

// street view event
function viewInit( lat, lon ) {
    if ( ! lat ) {
        lat = <$mt:var name="center_lat"$>;
    }
    if ( ! lon ) {
        lon = <$mt:var name="center_lon"$>;
    }
    targetPoint  = new GLatLng( lat, lon );
    view.setLocationAndPOV( targetPoint );
}

function handleViewInitialized( location ) {
    map.setCenter(location.latlng);
}
    
function handlePanoramaError( errorCode ) {
  if ( errorCode == 600 ) {
    document.getElementById( streetViewId ).innerHTML = '<p style="color:red;">You cannot use street view in this area.</p>';
    return;
  }
  if ( errorCode == FLASH_UNAVAILABLE ) {
    document.getElementById( streetViewId ).innerHTML = '<p style="color:red;">You cannnot use streew view by this browser.</p>';
    return;
  }
}
//]]>
</script>
</mt:IfBlogUseGoogleMap>
<mt:Ignore><!--/[GoogleMap]--></mt:Ignore>

</mt:IfBlog>
</head>

<mt:Ignore><!--/[GoogleMap]--></mt:Ignore>
<mt:IfBlogUseGoogleMap>
<body onload="javascript:mapLoad();" onUnload="javascript:GUnload()" id="<$mt:BlogTemplateSetID$>" class="<$mt:Var name="body_class"$> <$mt:Var name="page_layout"$>">
<mt:else>
<body id="<$mt:BlogTemplateSetID$>" class="<$mt:Var name="body_class"$> <$mt:Var name="page_layout"$>">
</mt:IfBlogUseGoogleMap>
<mt:Ignore><!--[GoogleMap]--></mt:Ignore>

    <div id="container">
        <div id="container-inner">
            <div id="header">
                <div id="header-inner">
                    <div id="header-content">
<mt:If name="main_index">
                        <h1 id="header-name"><a href="<$mt:Var name="blog_url"$>" accesskey="1"><$mt:Var name="blog_name"$></a></h1>
    <mt:If name="blog_description">
                        <h2 id="header-description"><$mt:Var name="blog_description"$></h2>
    </mt:If>
<mt:Else>
                        <div id="header-name"><a href="<$mt:Var name="blog_url"$>" accesskey="1"><$mt:Var name="blog_name"$></a></div>
    <mt:If name="blog_description">
                        <div id="header-description"><$mt:Var name="blog_description"$></div>
    </mt:If>
</mt:If>
                        <$mt:Include module="ナビゲーション"$>
                        <$mt:Include module="サインイン"$>
                        <$mt:Include module="検索"$>
                   </div>
                </div>
            </div>
            <div id="content">
                <div id="content-inner">
                    <div id="alpha">
                        <div id="alpha-inner">

次に、テンプレートモジュール「ブログ記事の詳細」または、ブログ記事が表示される箇所に、

<div id="map" style="width: 500px; height: 350px; border: 1px solid #ccc; margin-bottom: 20px;"></div>
<div id="view" style="width: 500px; height: 350px; border: 1px solid #ccc; margin-bottom: 20px;"></div>

を埋め込みます。MTCS デフォルトの場合、「ブログ記事の詳細」は以下のようになっているので、

<div id="entry-<$mt:EntryID$>" class="entry-asset asset hentry">
    <div class="asset-header">
        <h1 id="page-title" class="asset-name entry-title"><$mt:EntryTitle$></h1>
        <$mt:Include module="ブログ記事のメタデータ"$>
    </div>
    <div class="asset-content entry-content">
<mt:If tag="EntryBody">
        <div class="asset-body">
            <$mt:EntryBody$>
        </div>
</mt:If>
<mt:If tag="EntryMore" convert_breaks="0">
        <div id="more" class="asset-more">
            <$mt:EntryMore$>
        </div>
</mt:If>
<mt:EntryCustomFields>
    <$mt:CustomFieldValue$>
</mt:EntryCustomFields>
    </div>
    <div class="asset-footer">
        <$mt:Include module="カテゴリ"$>
        <$mt:Include module="タグ"$>
    </div>
</div>

本文のすぐ下に表示したい場合、以下のようにするとよいでしょう。

<div id="entry-<$mt:EntryID$>" class="entry-asset asset hentry">
    <div class="asset-header">
        <h1 id="page-title" class="asset-name entry-title"><$mt:EntryTitle$></h1>
        <$mt:Include module="ブログ記事のメタデータ"$>
    </div>
    <div class="asset-content entry-content">
<mt:If tag="EntryBody">
        <div class="asset-body">
            <$mt:EntryBody$>
        </div>
</mt:If>

<mt:Ignore><!--[GoogleMap]--></mt:Ignore>
<mt:IfBlogUseGoogleMap>
<div id="map" style="width: 500px; height: 350px; border: 1px solid #ccc; margin-bottom: 20px;"></div>
<div id="view" style="width: 500px; height: 350px; border: 1px solid #ccc; margin-bottom: 20px;"></div>
</mt:IfBlogUseGoogleMap>
<mt:Ignore><!--/[GoogleMap]--></mt:Ignore>

<mt:If tag="EntryMore" convert_breaks="0">
        <div id="more" class="asset-more">
            <$mt:EntryMore$>
        </div>
</mt:If>
<mt:EntryCustomFields>
    <$mt:CustomFieldValue$>
</mt:EntryCustomFields>
    </div>
    <div class="asset-footer">
        <$mt:Include module="カテゴリ"$>
        <$mt:Include module="タグ"$>
    </div>
</div>

これで、投稿の際に設定した GoogleMap およびストリートビューが表示されるようになります。

MTCS で投稿する画面のカスタマイズ

MTCS の投稿画面で GoogleMap の座標を設定できるようにするには、投稿フォームのカスタマイズが必要です。デフォルト状態の投稿フォームは、テンプレートモジュール「ブログ記事フォーム」です。このテンプレートは、以下のようになっているので、

<script type="text/javascript">
<!--
function entry_create_loggedin() {
    var u = mtGetUser();
    var loggedin = u && u.is_authenticated && u.is_author ? true : false;
    var eid = 'logged_in';
    conditional_block(loggedin, eid);
    if (!loggedin) {
        var p = document.getElementById('login_message');
        if (!p) return;
        if (u && !u.is_author) 
            p.innerHTML = "ブログに投稿する前に登録を行ってください。";
        else
            if (u && !u.can_post)
                p.innerHTML = "投稿する権限がありません。";
            else
                p.innerHTML = '<a href="javascript:void(0)" onclick="return mtSignInOnClick(\'login_message\')">サインインしてブログ記事を投稿してください。</a>';
    } else {
        var mt = document.getElementById('magic_token');
        if (mt) mt.value = u.sid;
    }
}
// -->
</script>
<mt:IfLoggedIn script="entry_create_loggedin">
<form method="post" action="<$mt:CGIPath$><$mt:CommunityScript$>" name="entry_form" id="create-entry-form" enctype="multipart/form-data">
    <input type="hidden" name="__mode" value="post" />
    <input type="hidden" name="blog_id" value="<$mt:BlogID$>" />
    <input type="hidden" id="magic_token" name="magic_token" value="" />
    <mt:SetVarBlock name="field-content"><input id="entry-title" class="ti" name="title" /></mt:SetVarBlock>
    <$mt:Include module="フォームフィールド" id="entry-title" class="" label="タイトル"$>

    <mt:SetVarBlock name="field-content"><textarea id="entry-body" class="ta" name="text" rows="15" cols="50"></textarea></mt:SetVarBlock>
    <$mt:Include module="フォームフィールド" id="entry-body" class="" label="本文"$>

    <mt:If tag="BlogCategoryCount">
        <mt:SetVarBlock name="field-content">
            <select id="entry-category" name="category">
                <option value="0">カテゴリを選択...</option>
            <mt:TopLevelCategories>
                <mt:SetVarBlock name="loop_to"><$mt:Var name="__depth__" _default="0"$></mt:SetVarBlock><mt:SetVarBlock name="spacer"><mt:For start="1" end="$loop_to">&nbsp;&nbsp;&nbsp;&nbsp;</mt:For></mt:SetVarBlock><option value="<$mt:CategoryID$>"><$mt:Var name="spacer"$><$mt:CategoryLabel$></option>
                <$mt:SubCatsRecurse$>
            </mt:TopLevelCategories>
            </select>
        </mt:SetVarBlock>
        <$mt:Include module="フォームフィールド" id="entry-category" class="" label="カテゴリ"$>
    </mt:If>

    <mt:EntryCustomFields>
        <mt:SetVarBlock name="custom_field_name"><$mt:CustomFieldName$></mt:SetVarBlock>
        <mt:SetVarBlock name="field-content"><$mt:CustomFieldHTML$></mt:SetVarBlock>
        <mt:SetVarBlock name="custom_field_id">profile_<$mt:CustomFieldName dirify="1"$></mt:SetVarBlock>
        <$mt:Include module="フォームフィールド" id="$custom_field_id" class="" label="$custom_field_name"$>
    </mt:EntryCustomFields>
    <input type="submit" accesskey="s" name="post" id="entry-submit" value="投稿" />
</form>
<mt:Else>
<p id="login_message"></p>
</mt:IfLoggedIn>
<script type="text/javascript">
<!--
mtAttachEvent('usersignin', entry_create_loggedin);
//-->
</script>

これを、以下のように変更するとよいでしょう。

<script type="text/javascript">
<!--
function entry_create_loggedin() {
    var u = mtGetUser();
    var loggedin = u && u.is_authenticated && u.is_author ? true : false;
    var eid = 'logged_in';
    conditional_block(loggedin, eid);
    if (!loggedin) {
        var p = document.getElementById('login_message');
        if (!p) return;
        if (u && !u.is_author) 
            p.innerHTML = "ブログに投稿する前に登録を行ってください。";
        else
            if (u && !u.can_post)
                p.innerHTML = "投稿する権限がありません。";
            else
                p.innerHTML = '<a href="javascript:void(0)" onclick="return mtSignInOnClick(\'login_message\')">サインインしてブログ記事を投稿してください。</a>';
    } else {
        var mt = document.getElementById('magic_token');
        if (mt) mt.value = u.sid;
    }
}
// -->
</script>
<mt:IfLoggedIn script="entry_create_loggedin">
<form method="post" action="<$mt:CGIPath$><$mt:CommunityScript$>" name="entry_form" id="create-entry-form" enctype="multipart/form-data">
    <input type="hidden" name="__mode" value="post" />
    <input type="hidden" name="blog_id" value="<$mt:BlogID$>" />
    <input type="hidden" id="magic_token" name="magic_token" value="" />
    <mt:SetVarBlock name="field-content"><input id="entry-title" class="ti" name="title" /></mt:SetVarBlock>
    <$mt:Include module="フォームフィールド" id="entry-title" class="" label="タイトル"$>

    <mt:SetVarBlock name="field-content"><textarea id="entry-body" class="ta" name="text" rows="15" cols="50"></textarea></mt:SetVarBlock>
    <$mt:Include module="フォームフィールド" id="entry-body" class="" label="本文"$>

    <mt:If tag="BlogCategoryCount">
        <mt:SetVarBlock name="field-content">
            <select id="entry-category" name="category">
                <option value="0">カテゴリを選択...</option>
            <mt:TopLevelCategories>
                <mt:SetVarBlock name="loop_to"><$mt:Var name="__depth__" _default="0"$></mt:SetVarBlock><mt:SetVarBlock name="spacer"><mt:For start="1" end="$loop_to">&nbsp;&nbsp;&nbsp;&nbsp;</mt:For></mt:SetVarBlock><option value="<$mt:CategoryID$>"><$mt:Var name="spacer"$><$mt:CategoryLabel$></option>
                <$mt:SubCatsRecurse$>
            </mt:TopLevelCategories>
            </select>
        </mt:SetVarBlock>
        <$mt:Include module="フォームフィールド" id="entry-category" class="" label="カテゴリ"$>
    </mt:If>

<mt:Ignore><!--[GoogleMap]--></mt:Ignore>
<mt:IfBlogUseGoogleMap>
<div id="map" style="width: 500px; height: 350px; border: 1px solid #ccc; margin-bottom: 0px;"></div>
<div id="googlemap-location" style="padding: 5px 5px 10px 5px;">
    緯度<br />
    <input type="text" name="lat" id="lat" class="full-width" value="<mt:BlogGoogleMapDefaultLat>" /><br />
    経度<br />
    <input type="text" name="lon" id="lon" class="full-width" value="<mt:BlogGoogleMapDefaultLon>" />
</div>
<div id="view" style="width: 500px; height: 350px; border: 1px solid #ccc; margin-bottom: 20px;"></div>
</mt:IfBlogUseGoogleMap>
<mt:Ignore><!--/[GoogleMap]--></mt:Ignore>

    <mt:EntryCustomFields>
        <mt:SetVarBlock name="custom_field_name"><$mt:CustomFieldName$></mt:SetVarBlock>
        <mt:SetVarBlock name="field-content"><$mt:CustomFieldHTML$></mt:SetVarBlock>
        <mt:SetVarBlock name="custom_field_id">profile_<$mt:CustomFieldName dirify="1"$></mt:SetVarBlock>
        <$mt:Include module="フォームフィールド" id="$custom_field_id" class="" label="$custom_field_name"$>
    </mt:EntryCustomFields>
    <input type="submit" accesskey="s" name="post" id="entry-submit" value="投稿" />
</form>
<mt:Else>
<p id="login_message"></p>
</mt:IfLoggedIn>
<script type="text/javascript">
<!--
mtAttachEvent('usersignin', entry_create_loggedin);
//-->
</script>

MTCS のデフォルト状態であれば、これで投稿の際に GoogleMap とストリートビューが読み込まれるようになりますが、テンプレートの設定によっては、GoogleMap を呼び出す Javascript が読み込まれないかもしれません。その場合は、投稿画面の <head> 〜 </head> 内で、先ほど設定した GoogleMap 読み込みのためのスクリプトが読み込まれるようにテンプレートを設定してください。

お願い

基本的にご利用は無償かつ自己責任ですが、継続的な開発、更新のため、よろしければドネーションをご検討ください。以下のボタンから、PayPal を通じて行うことができます。

また、フィードバックもぜひ kenmin.okayama@gmail.com までお送りください。コメントでもかまいません。

Comments


Contact me

Copyright © 2005 - 2017 okayama All rights reserved.