【WordPress】iframeで埋め込んだGoogleマップの画面スクロールの有効/無効をボタンで切り替える方法

Gooleマップやストリートビューをiframeで埋め込む場合、画面をスクロールすると埋め込んだ場所でiframe内にスクロールが移ってしまうためにユーザーに対してフラストレーションを与えてしまうことがあります。

PCや大きめのタブレットであればiframeを避けてスクロールすることもできるのですが、スマホの場合だとマップを画面横幅いっぱいに表示させることも多く、そのためどうしてもiframeで画面スクロールが止まってしまいます。

そこで画面スクロール中にiframeの上に来てもそのままスクロールができるようにし、また必要に応じてユーザー側で切り替えができるように切り替えボタンを設置してみましたので、今回はその方法について書いてみたいと思います。

スポンサーリンク




スクロール無効化はpointer-events:none;を使う

iframeで埋め込んだGoogleマップのスクロールを無効化する場合は、CSSのpointer-eventsプロパティの値をnoneにします。

ここでは便宜的にHTMLのstyle属性にpointer-events:none;を指定しています。

<iframe style="border: 0; pointer-events: none;" src="https://www.google.com/maps/embed?pb=xxxxx" width="100%" height="410" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

これでiframeのスクロールが無効化されます。

再度有効化する場合はpointer-eventsの値をautoにします。

ボタンでスクロールの有効/無効を切り替える

とりあえずiframeのスクロールを無効にすることができましたので、次にボタンで有効/無効の切り替えができるようにしてみます。

ボタンの切り替えにはJavascript(jQuery)を使用します。

jQuery('button.map').click(function(){
      if(jQuery('button.map').text() == '地図を動かす'){
	jQuery('.maps iframe').css('pointer-events', 'auto');
        jQuery('button.map').text('地図を止める');
      }else{
        jQuery('.maps iframe').css('pointer-events', 'none');
        jQuery('button.map').text('地図を動かす');
      }
});

今回はWordpressへの設置を想定しているため、$ではなくjQueryを使用していますが、Wordpress以外のページであれば$を使用していただいて問題ありません。

Googleマップのiframeタグはdivで囲みます。

<div class="maps">
<iframe src="https://www.google.com/maps/embed?pb=xxxxx; width="680" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

iframeに直接クラスやIDを追加しても良いのですが、埋め込む度に追加するのも面倒ですので、貼り付けた埋め込みコードをあらかじめ用意したタグで囲むだけにしています。

あらかじめ用意したタグの挿入には、AddQuickTagというプラグインを使用しています。

また、切り替え用のボタンも用意します。

<button class="map">地図を動かす</button>

CSSはページ読み込み直後のスクロールを無効にするためだけに使用しました。

.maps iframe{
    pointer-events: none;
}

jQueryのready関数などを使用しても良かったのですが、あまり動的なコードを増やすとページが重くなってしまうため初期スクロールの設定はCSSに直接記述しています。

まとめると以下のようになります。

【HTML】

<div class="maps">
<iframe src="https://www.google.com/maps/embed?pb=xxxxx; width="680" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<button class="map">地図を動かす</button>

WordPressでは埋め込みたいページに記述します。

【CSS】

.maps iframe{
    pointer-events: none;
}

WordPressではstyle.cssなどに記述します。

【Javascript(jQuery)】

jQuery('button.map').click(function(){
      if(jQuery('button.map').text() == '地図を動かす'){
	jQuery('.maps iframe').css('pointer-events', 'auto');
        jQuery('button.map').text('地図を止める');
      }else{
        jQuery('.maps iframe').css('pointer-events', 'none');
        jQuery('button.map').text('地図を動かす');
      }
});

body終了タグの直前に記述しています。

上のコードでは、ボタンが押された場合にボタンのテキストで状態を判定し、スクロールが無効になっていればpointer-events:auto;で有効化し、有効になっていればpointer-events:none;で無効化しています。

ボタンのテキストで状態を判定するよりもvalue属性などを使用したほうが良いのかもしれません。

複数のiframe(地図)を設置する場合

複数のiframe(地図)を設置する場合は上記のコードでは上手く動作しません。

どのiframe(地図)のボタンが押されたのかを判断する必要があります。

押されたボタンの判定方法はいろいろあるかと思いますが、私はbuttonタグにidを付与する方法でおこないました。

スキル的な問題もあり、あまり複雑なことはできないため非常に簡単な方法で実装しています。

コードを使用する際は随時検証をおこなってください。

jQuery(document).ready(function(){
  var i = 1;
  jQuery('button').each(function(){
    jQuery(this).attr('id', i);
    i++;
  });
});

まず複数のボタンを判定するために、ページ読み込み直後にbuttonタグに対して数字でidを付与しています。

buttonのid自体は何でも良いため、とりあえずページ上のbutton要素すべてにidを与えています。

ただ、この作業が思った以上にページの読み込み速度に影響したため、泣く泣くではありますがidは手動で付与することにしました。

また、ボタンのみにidを付与することにしたために、divの中にbuttonタグを入れてしまっています。

<div class="maps">
<iframe src="https://www.google.com/maps/embed?pb=xxxxx; width="680" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>
<button class="map" id="1">地図を動かす</button>
</div>

こうすることでbuttonタグのみにidを付与しても、buttonの親要素div.mapsから該当のiframeへアクセスできます。

ただ、あまりスマートな方法でもないと思います。

あとは先ほどのコードのセレクタをidで判定するように変更しています。

jQuery('button.map').click(function(){
      if(jQuery('.maps #' + this.id).text() == '地図を動かす'){
	jQuery(this).parent().children('iframe').css("pointer-events", "auto");
        jQuery('.maps #' + this.id).text('地図を止める');
      }else{
        jQuery(this).parent().children('iframe').css("pointer-events", "none");
        jQuery('.maps #' + this.id).text('地図を動かす');
      }
});

parentchildren関数は、それぞれ親要素と子要素を取得する関数です。

buttonが押された場合にidを取得してテキストから状態を判断し、押されたボタンの親要素からiframeのスクロールの有効/無効の切り替えをしています。

まとめ

Googleマップをiframeで埋め込んだ場合のスクロールの有効/無効をボタンで切り替える方法について書いてみました。

上記はGoogleマップのみを取り上げていますが、ストリートビューをiframeで埋め込む場合でも同じCSSのプロパティpointer-eventsを使用してスクロールを無効化することができます。

本当はボタンでの切り替えではなく、ユーザーがiframeをクリック、もしくはタップしたことを判定して切り替えたかったのですがjQueryでタップ処理が上手く実装できなかったためボタンで妥協することにしました。

正直なところ最低限理想の動きが出来れば良いというコードですので、あまり参考にはならないかもしれませんが、私自身調べてもスクロールの切り替えに関する情報がなかったため書いてみました。

慣れている方であれば、ただの切り替えの問題なのですが、動かすまでが結構大変でした。。

jQueryでタップ処理が上手くいく方法をご存知の方がいらっしゃったら教えていただきたいです。

コードは検証していますが、間違いや不具合があったらごめんなさい。

Wordpressの中級者以上を目指すなら

Wordpressの中級者以上を目指すのであればオンラインスクールもおすすめです。

筆者も講師(メンター)の一人ですが、オンラインスクールの一つ「Techacademy」ではWordpressをカスタマイズするために必要なカリキュラムが用意されています。

オンラインブートキャンプ WordPressコース

Wordpressにも利用されているPHPを利用してWebアプリケーションを開発してみたい方には「PHP/Laravelコース」がおすすめです。

オンラインブートキャンプ PHP/Laravelコース
スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする