昨日のエントリーで、
「埋め込みんでいるルートラボの地図。スクリプトで埋め込まれてるため解決策が見いだせない。」
と書きましたが、何とか対処できたので自分用の備忘録としてエントリーしておきます。

ルートラボの地図をブログなどに埋め込む場合、公式ではスクリプトのコードしか提供していません。そのコードをWordPressの投稿欄にコピペすると、サイトをレスポンシブ化していてもiPhoneで見ると横にはみ出してしまいます。

地図のタイトルをクリックすれば、画面が切り替わって全画面で地図を見ることはできるので致命傷ではないのですが、しかし見映えが悪い。

方策はないかと探っていたら、「tera-tory2・ルートラボの地図をwordpressの記事に表示させる方法」で、スクリプトのコードからiFrameのHTMLコードを生成する方法が紹介されていました。
iFrameのHTMLコードがわかれば、YouTubeムービーのようにレスポンシブ化ができます。

で、紹介された方法そのままに、ソースコードを貼り付けるのも芸がないので、function.phpに関数を設定し、ショートコードでHTMLコードを生成させることにしました。

fonction.php

//ルートラボiFrame生成
function latlonglabcode( $atts, $content = null ) {
	return '<div class="routelab"><iframe scrolling="no" frameborder="0" src="http://latlonglab.yahoo.co.jp/route/watch?id=' . $content . '&mode=paste&graph=false&mapstyle=map&maponly=false&url=\'+encodeURIComponent(location.href)+\'"></iframe></div>';
}
add_shortcode('rlab', 'latlonglabcode');

サンプルソースでは地図オプションに、標高グラフなし「graph=false」、地図の種類は通常地図「mapstyle=map」、タイトルなし「maponly=false」を設定しています。
別の設定をする場合は、falseはtrueに、地図の種類は、地形図：topographic、大きい文字：bold、モノトーン：monotone、水域図：waters、鉄道路線図：railwayとします。

HTML

[rlab]〜ここにルートラボ・マップIDを記述〜[/rlab]

ルートラボ・マップのアドレスの後半、「id=」以降のマップIDのみ記述します。

CSS

.routelab {
 	position: relative;
 	width: 100%;
	padding-top: 75%; /*表示高さ指定*/
	overflow: hidden;
	border: solid 1px #aaa;
}
.routelab iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

「overflow: hidden」を入れないとiPhoneで「padding-top」が効かず、表示がおかしくなります。
また、「border」の指定も「iframe」の方に設定すると左辺、下辺が表示されません。

iPhoneでの表示例。

ただし、問題もあります。iPhoneを縦から横に持ち替えたり、PCブラウザの横幅を変えた場合、iFrameの枠サイズは追従して可変しますが、中身の地図は最初に読み込んだ大きさのまま。
リロードしないと枠にフィットしてくれません。もう一工夫必要ですが。現在のスキルではここまで。