もぜひご覧ください。
Google Maps導入支援ページで出力されたコードを、Blog等の記事に貼り付けたい方もいらっしゃると思います。
基本的には、以下の条件を満たせば、記事に貼り付けることが可能です。
- Blog等のテンプレートをカスタマイズして、ヘッダー部分（<head>~</head>）にGoogle Maps用のscriptタグを追加することができる
- 記事内にJavaScriptを入れたときに、JavaScript内の「<」「>」「'」の文字を実体参照（「<」「>」「'」など）に置換せずにそのまま出力することができる
- 記事内にJavaScriptを入れたときに、改行がbrタグに置換されないか、または置換されてもその前に「//」を入れることでコメント化できる
Movable Typeは上記の条件を満たしますので、エントリー内にGoogle Mapsのコードを入れることができます。
今日はその方法を紹介します。
1.easy_googlemaps.jsのアップロード
まず、こちらのエントリーの「2.easy_googlemaps.jsのダウンロード」の手順に従って、easy_googlemaps.jsをダウンロードして、サーバーにアップロードしておきます。
アップロード先のディレクトリは、「http://~」でアクセスできるところであれば、どこでもかまいません。
2.テンプレートの書き換え
次に、メインページのテンプレートと、各アーカイブ・テンプレートで、ヘッダー部分（<head>～</head>）に以下のようなタグを入れます。
なお、「API Key」と「アップロード先」の部分（赤字の部分）は、ご自分の環境に合わせて書き換えます。
<script src="http://maps.google.com/maps?file=api&v=2&key=API Key" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="http://アップロード先/easy_googlemaps.js" charset="utf-8"></script>
3.コードのscriptタグの部分をdivタグで囲む
次に、地図を表示したいエントリーに、Google Maps導入支援ページで出力されたコードを貼り付けます。
ただし、単に貼り付けるだけだと、通常の設定では改行がbrタグに変換されてしまいます。
その解決法はいくつかありますが、その1つは「コードのscriptタグの部分をdivタグで囲む」というものです。
Movable Typeでは、エントリーごとに「改行設定」で改行を変換するかどうかを指定することができます。
通常は「改行を変換する」という設定になっていて、改行がbrタグに変換されます。
↓エントリーの改行設定
ただし、改行を変換するように指定した場合でも、いくつかのHTMLのタグの内部は、改行が変換されないようになっています。
<div>~</div>で囲んだ部分は、改行が変換されないようになっていますので、その仕組みを利用します。
Google Maps導入支援ページで出力されたコードを貼り付ける際に、以下の例のように、scriptタグの前後をdivタグ（赤字の部分）で囲むようにします。
これで、scriptタグの部分がそのまま出力されるようになります。
scriptタグの前後をdivタグで囲む例
<div id="tokyo_tower" style="width: 500px; height:500px; border : 1px solid #979797;"><a href="http://www.tokyotower.co.jp/" target="_self">東京タワー(東京都港区芝公園４丁目２?８)</a>の地図を表示中です。<br />しばらくお待ちください。</div>
<div style="display : none;">
<script type="text/javascript">
//<![CDATA[
gMapOnLoad(function() {
var map = new EasyGoogleMaps({ id: 'tokyo_tower', lat: 35.658625, lon: 139.745415, zoom: 15, MapType: 1, LargeMapControl: 1, MapTypeControl: 1, OverviewMapControl: 1, Marker: 1, infoWindow: 1, infoHTML: '<a href=\"http://www.tokyotower.co.jp/\" target=\"_self\">東京タワー(東京都港区芝公園４丁目２?８)</a>' });
map.draw();
});
gMapBeforeUnload(function(){GUnload()});
//]]>
</script>
</div>
4.改良テキストフィルターを使う
拙作の改良テキストフィルタープラグインでは、エントリー内に<noconv>~</noconv>で囲んだ部分を入れることで、その部分の改行を自動変換しないようにすることができます。
このプラグインをインストールし、地図を入れたいエントリーで改行設定を「改良テキストフィルター」に設定します。
そして、Google Maps導入支援ページで出力されたコードを貼り付ける際に、以下の例のように、scriptタグの前後を<noconv>~</noconv>（赤字の部分）で囲むようにします。
scriptタグの前後を<noconv>~</noconv>で囲む例
<div id="tokyo_tower" style="width: 500px; height:500px; border : 1px solid #979797;"><a href="http://www.tokyotower.co.jp/" target="_self">東京タワー(東京都港区芝公園４丁目２?８)</a>の地図を表示中です。<br />しばらくお待ちください。</div>
<noconv>
<script type="text/javascript">
//<![CDATA[
gMapOnLoad(function() {
var map = new EasyGoogleMaps({ id: 'tokyo_tower', lat: 35.658625, lon: 139.745415, zoom: 15, MapType: 1, LargeMapControl: 1, MapTypeControl: 1, OverviewMapControl: 1, Marker: 1, infoWindow: 1, infoHTML: '<a href=\"http://www.tokyotower.co.jp/\" target=\"_self\">東京タワー(東京都港区芝公園４丁目２?８)</a>' });
map.draw();
});
gMapBeforeUnload(function(){GUnload()});
//]]>
</script>
</noconv>
5.改行を変換しない
エントリーの改行設定で「なし」を選んで、改行を一切変換せずに、エントリーに入力したとおりに出力することもできます。
この機能を使う場合は、Google Maps導入支援ページで出力されたコードを、エントリーにそのまま貼り付けることができます。
コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。
いつも参考にさせていただいています。
有り難うございます。
さて，googleマップの表示をさせてみようと今回も参考にさせていただきました。
２つのエントリーでgoogleマップの地図を貼り付けましたが，メインのページでは，２つめの地図がどうしても表示されません。
アーカイブのページでは表示されるのですが...。
どうしてなのかわかりません。
お教えいただければ大変有り難いのですが...。
よろしくお願い申し上げます。
＞dotabatapapaさん
こんにちは。GoogleMaps導入支援ページをご利用いただき、ありがとうございます。
ご質問の件ですが、メインページを拝見したところ、2つの地図の表示先のdiv要素に同じIDが割り当てられています。
地図ごとに違うIDを割り当てる必要があります。