Google Maps導入支援ページ（その5・FC2ブログの記事に地図を貼り付ける）

FC2ブログは、レンタルBlogの中ではカスタマイズ性が高く、多くのユーザーに利用されています。
FC2ブログの記事に、Google Maps導入支援ページの地図を貼り付けることもできます。

1.easy_googlemaps.jsのダウンロード

まず、こちらのエントリーの「2.easy_googlemaps.jsのダウンロード」の手順に従って、easy_googlemaps.jsをダウンロードします。
ダウンロードしたファイルはzip形式になっていますので、解凍してeasy_googlemaps.jsを取り出しておきます。

2.テンプレートの書き換え

次に、テンプレートを書き換えます。

先程解凍したeasy_googlemaps.jsのファイルをメモ帳で開き、その内容をすべてコピーしておきます。
そして、テンプレートの編集のページを開き、HTMLテンプレートのヘッダー部分（<head>～</head>）に、以下を追加します。
ただし、赤字の「API Key」の部分は、ご自分のAPI Keyに置き換えます。
また、「easy_googlemaps.jsの内容」の部分を、コピーしておいたeasy_googlemaps.jsの内容に置き換えます。

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=API Key" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
easy_googlemaps.jsの内容
//]]>
</script>

3.記事にコードを貼り付ける

次に、Google Maps導入支援ページでコードを作成して、それを記事に貼り付けます。
ただし、単に貼り付けるだけだと、改行の置換が行われて地図が表示されません。
記事を書く際に、以下の設定を行ってから、コードを貼り付けます。

  • WYSIWYGテキストエディター機能をオフにします。
  • 「詳細設定」の部分にある「テキストフォーマット」の項目で、「HTMLタグのみ」をオンにします。

なお、上の設定によって、記事中の改行はbrタグに変換されなくなります。
改行したい箇所には、手動で「<br />」のタグを入れる必要があります。