snap.js + Google Maps API(スワイプイベントをmap要素に適用しない）

snap.jsを用いてサイドメニュー付きの地図を作成してみています。

それなりにサクサク動いて便利なのですが、地図を移動する際のタッチが親要素にsnap.jsのスワイプイベントとして伝播してしまい、地図を動かすたびにサイドメニューが開いて非常に使いづらい感じになっていました。

example

こまったもんだなーと思って公式のDemoを探っていたら「no-drag」というまさに求めていたものがそこに！

スワイプイベントの伝播を止めたいときは、対象とする要素にカスタムデータ属性「data-snap-ignore」を指定し「true」を渡してあげればいいだけでした。

map要素に適応するならこんな感じ。

これでmap要素上ではスワイプイベントがsnap.jsに伝わらずサイドメニューが開きまくってこまるという問題が解消されます。
(ヘッダ上でスライドした場合はちゃんとメニューが表示されます）

no drag example