たった2ステップでGoogleマップを自動的にレスポンシブな埋め込みコードにする方法

シェアする

google logo

単発ながら『WPカスタマイズコード』シリーズの第二弾です。

ブログで日記やグルメレポート等のような現場報告または実地調査をテーマにした記事を書く際、地図の併記の有無だけでその記事の情報発信力は格段に差が生じます。

それはつまり、その手の記事を求めるリピーター獲得の成否、ひいてはアクセス数アップの成否に繋がるという事です。

それ故に地図の埋め込みは積極的に行いたいものですが、その類ではメジャーなツールであるGoogleマップのコードは、それ単体がレスポンシブではありません。

スマホで場所を確認しながら向かう閲覧者が居た場合には『地図がスマホの画面からはみ出て見づらい』という不便さを閲覧者に与えてしまうため、折角の有益な情報を提供してもリピーターの獲得をし損ねてしまう恐れがあります。

そこで、本稿ではたった2ステップの操作でGoogleマップをレスポンシブな埋め込みにする方法を紹介します。

スポンサーリンク

デモンストレーション

大阪市此花区にあるユニバーサル・スタジオ・ジャパンUSJ)の最寄駅であるユニバーサルシティ駅付近でポケモンGOをプレイ中、レアポケモンであるカビゴンと遭遇した。その時に撮った写真と併せて地図で出現場所の詳細を以下に示す。出現場所はサイゼリヤが入居する和幸ビルとスターバックスが入居するホテル京阪ユニバーサルタワーとの間に位置する同駅の出口前である。

ユニバーサルシティ駅前(大阪市此花区)でカビゴンGETだぜ! #ポケモンgo #pokemongo #osaka
From Tumblr

方法

ライフハッカー(日本版)で紹介されていた方法を参考にしています。それによると、Googleマップをレスポンシブ対応で埋め込む方法は先ずCSSに下記のコードを適用します。

【ステップ1:CSSの追加】

<style>
.google-maps {
position: relative;
padding-bottom: 75%; // これが縦横比
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>

次に、本文中の任意の場所でGoogleマップで取得した<iframe>コードを<div class=”google-maps”>~</div>の間に挟み込んで埋め込めばレスポンシブが実現可能だという事です。

【展示例】

<div class="google-maps"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d56862.46841686429!2d88.22965551484117!3d27.03319056727677!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39e42e654cf501bb%3A0x4175555979d4702a!2z44Kk44Oz44OJIOOAkjczNDEwMSDopb_jg5njg7Pjgqzjg6sg44OA44O844K444Oq44Oz!5e0!3m2!1sja!2sjp!4v1470291723472" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe></div>


しかしながら、<div class=”google-maps”>~</div>という一見短いようで手入力が面倒臭そうなdivタグで過去記事を再編集してラッピングするのはやはり面倒臭いので可能であれば省きたいものです。

そこで、埋め込みコードを自動的にdivタグでラッピングする方法は、simplicityのfunctions.phpにあったものをアレンジして作った、下記のコードを自作プラグインに組み込むだけで済みます。

【ステップ2:カスタム関数の追加】

/**
 * GoogleMaps埋め込みにラッパーを装着
*/
function wrap_iframe_in_div_for_googlemap($the_content) {
 if ( is_singular() ) {
 $the_content = preg_replace('/<iframe[^>]+?www\.google\.com\/maps\/embed[^<]+?<\/iframe>/is', '<div class="google-maps">${0}</div>', $the_content);
 }
return $the_content;
}
add_filter('the_content','wrap_iframe_in_div_for_googlemap');

なおこのカスタム関数を追加する場合には注意点があり、<div class=”google-maps”>~</div>を既に手入力した記事を放置したまま有効にするとラッピングが二重になるため、その記事では地図の下に地図一枚分ばかりの余白が生じます。

以上。