Bloggerには、ジオタグgeo-tag、投稿の設定項目:場所)を設定できます。

bloggerのジオタグ

当ブログは旅行関係の投稿が多いので、殆んどの投稿でジオタグを設定していますが、投稿では「場所」と表示されるだけでイマイチ効果を感じられない…
そこで、せっかく指定したジオタグをiframe中で表示することにしました。

テンプレート中で、ジオタグを表示する部分(青色)の下に、data:post.location.mapsUrlで指定された場所の地図をiframeで表示(赤色)。
※リンク先の末尾に、「&output=embed」を加える必要有。
iframeが少し小さいので、「大きな地図で見る」のリンクも加えました(オレンジ色)。
このブログではschema.orgのBlogpostingで構造化を行っているので、itemspropのcontentLocationをPlaceで展開しています(構造化タグは、黄色)。

<div class=’post-footer-line post-footer-line-2’>
<span class=’post-location’>
<b:if cond=’data:top.showLocation’>
<b:if cond=’data:post.location’>
<div itemprop=’contentLocation’ itemscope=’itemscope’ itemtype=’https://schema.org/Place’> <data:postLocationLabel/>
<a expr:href=’data:post.location.mapsUrl’ itemprop=’map’ target=’_blank’><span itemprop=’address’><data:post.location.name/></span></a>
<iframe expr:src=’data:post.location.mapsUrl + &quot;&amp;output=embed&quot;’ frameborder=’0’ height=’300’ marginheight=’0’ marginwidth=’0’ scrolling=’no’ width=’400’/>
<span style=’float: right;’><a expr:href=’data:post.location.mapsUrl’ target=’_blank’>大きな地図で見る</a></span>

※投稿の設定で場所を指定する時に自動で住所が入りますが、海上などを指定した時に、住所が消える又は日本のみになることがあります。
その場合には上手く表示できないことがあるので、手入力で住所や場所を入れましょう。

※この投稿では、ジオタグで那覇市にある首里城を指定してあります。

Bloggerのジオタグ(投稿の設定項目:場所)で設定した場所の地図をiframeで表示の地図
地図をGoogleマップで表示