BLOG

Go to top

MTCS でも使える GoogleMap プラグイン(ストリートビュー対応版)

August 9, 2008 6:27 PM

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

アップデートしました。使用前に必ずこちらをご覧ください。

先日の公開が話題を呼んでいる GoogleMapストリートビュー ですが、MTCS で使えたら面白いかもなあと思ってプラグインにしてみました。もちろん MTCS でなくてもちゃんと動作します。

概要

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

動作環境

現時点での最新版 Movable Type 4.2rc5 で動作確認していますが、Movable Type 4 以降であれば動作すると思います。コミュニティ・パックでも使えます。

ダウンロード

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 を使用するブログを選択しておきます。「中心の座標」や「デフォルトのズームレベル」の項目は、ブログ記事を投稿する時の標準設定になります。必要に応じて変更してください。デフォルトでは東京タワーになっています。ここまで完了したら、「変更を保存」ボタンで保存します。これで、管理画面からのブログ記事投稿の際に、GoogleMap と ストリートビューが表示され、自動取得された座標がブログ記事の情報として保存されるようになります。

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

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

<mt:IfBlog>
<mt:SetVarBlock name="googlemap_blog_id"><$mt:GoogleMapBlogID$></mt:SetVarBlock>
<mt:If name="blog_id" eq="$googlemap_blog_id">
<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:GooglemapCenterLat$></mt:IfNonEmpty></mt:SetVarBlock>
<mt:SetVarBlock name="center_lon"><mt:IfNonEmpty tag="EntryGoogleMapLon"><$mt:EntryGoogleMapLon$><mt:else><$mt:GooglemapCenterLon$></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:googlemapdefaultlevel$> );
        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:If>
</mt:IfBlog>

さらに、画面の読み込み時に 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:SetVarBlock name="googlemap_blog_id"><$mt:GoogleMapBlogID$></mt:SetVarBlock>
<mt:If name="blog_id" eq="$googlemap_blog_id">
<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:GooglemapCenterLat$></mt:IfNonEmpty></mt:SetVarBlock>
<mt:SetVarBlock name="center_lon"><mt:IfNonEmpty tag="EntryGoogleMapLon"><$mt:EntryGoogleMapLon$><mt:else><$mt:GooglemapCenterLon$></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:googlemapdefaultlevel$> );
        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:If>
</mt:IfBlog>
</head>
<mt:If name="blog_id" eq="$googlemap_blog_id">
<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:If>
    <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>
<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: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>

<div id="map" style="width: 500px; height: 350px; border: 1px solid #ccc; margin-bottom: 20px;"></div>
<div id="googlemap-location" style="padding: 5px 5px 10px 5px;">
    <__trans phrase="Lat."><br />
    <input type="text" name="lat" id="lat" class="full-width" value="<mt:var name="lat">" /><br />
    <__trans phrase="Lon."><br />
    <input type="text" name="lon" id="lon" class="full-width" value="<mt:var name="lon">" />
</div>
<div id="view" style="width: 500px; height: 350px; border: 1px solid #ccc; margin-bottom: 20px;"></div>

<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 が読み込まれないかもしれません。その場合は、投稿画面の 〜 内で、先ほど設定した GoogleMap 読み込みのためのスクリプトが読み込まれるようにテンプレートを設定してください。

お願い

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

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

Comments

Contact me

Copyright © 2005 - 2022 okayama All rights reserved.