投稿の設定「場所」を地図で表示する

Bloggerで記事を投稿する際、投稿画面の右側に「投稿の設定」欄がある。

「投稿の設定」欄

この中に「場所」という項目があり、投稿に関係する位置情報（ジオタグ）を埋め込むことが可能だ。

しかしこれ、実際に設定してみても、記事のフッタに「場所：ほげほげ」……といったテキストリンクしか表示されない。

テキストリンクだけで気づきにくい

ダムの場所、せっかく設定してるんだし、場所は地図で示したいな～(´・ω・｀)……と思ってテンプレートを弄ることにした。

地図を表示する

テンプレートの中から、以下の記述がある場所を探す。多用される項目じゃないと思うので「postLocationLabel」で検索するといいと思う。

<b:if cond='data:top.showLocation'>
  <b:if cond='data:post.location'>
    <data:postLocationLabel/>
    <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
  </b:if>
</b:if>

赤字の行を追加する。緑色の部分はGoogleMapへのリンク。必要ならば追記してね。

<b:if cond='data:top.showLocation'>
  <b:if cond='data:post.location'>
    <data:postLocationLabel/>
    <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
    <iframe expr:src='data:post.location.mapsUrl + &quot;&amp;iwloc=B&amp;z=14&amp;output=embed&quot;' frameborder='0' height='200' marginheight='0' marginwidth='0' scrolling='no' width='300'/>
    <span style='float: right;'><a expr:href='data:post.location.mapsUrl' itemprop='map' target='_blank'>大きな地図で見る</a></span>
   </div>
  </b:if>
</b:if>

テンプレートを弄るレベルの方に説明するまでもないかとは思いつつ、変更が必要な場所は青字の部分になるかと思う。

height='200'	地図の幅
width='300'	地図の高さ
iwloc=B	地点に吹き出しを表示しないオマジナイ。吹き出し付きで地図表示したい場合は削ってしまうか、引数を「B」から「A」に変更
z=14	ズームレベル。必要に応じて適宜増減

個別記事の時だけ地図を表示する

なお、このままだと、トップページ等一覧表示の画面でもいちいち地図が表示されることになってしまい、目障りになってしまうかも。
個別記事の時だけ表示するようにしたい場合は、下記のコードで囲っておくといいと思う。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
　　：
　上のサンプルコードのブロックすべて
　　：
</b:if>