読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

Google Mapsのスクロール無効化とモバイル時だけのドラッグ無効化

Maps WebDev

 Google Mapsを埋め込む時に、動いて欲しくないときがよくある。個人的には、ワンページレイアウトやモバイルも含むRWDのウェブサイトを作ることが多いので、基本的に動いて欲しくない。
 それはオプションに渡す値次第でなんとかなる。鍵となるのは、scrollwheelとdraggableで、それぞれにfalseを指定すれば無効になる。
 いまいちど確認しておくと、地図のスクロールを拒否する理由は、ワンページレイアウトでページ全体をスクロールしていく時に、そのままだと地図の場所でスクロールを延々と続けてしまうから。ドラッグを拒否したいのは、モバイル機器のタッチパネル上でスワイプする際に今述べたようなことと同じ状況がおきてしまうから。
 ここでは、デスクトップのドラッグは問題になっていないので、モバイルだけに限定する処理をする。そのために、isMobile関数を自作する。この関数については、下のリンク先を参照のこと。

<script type="text/javascript">
var mapOptions = {
    zoom: 15,
   //省略
    scrollwheel: false, //スクロールの無効化
    <?php echo(isMobile()) ? 'draggable: false,' : ''; ?> //スワイプで動かないように
    styles: style
};

var mp = new google.maps.Map(document.getElementById('map'), mapOptions);

//略

</script>


javascript - How can I disable scrolling on the Google Maps mobile layout? - Stack Overflow

関連

Google Mapsのデフォルトスタイルを手軽にクールなものへ変更する - Birth of the Fool