UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Google Map】2本指のズームとパンを止める

Google Map を使ったアプリで、いざマップを触ろうとすると以下のようなメッセージがでる

ユーザー体験が悪いためこれをやめたい

そもそもこれが表示されるのはページのスクロールとマップのスクロールが混在しないようにするためで、私の場合は、以下のように何かしらのレイヤーの上にマップのレイヤーがあるようなUIにしていたためこのメッセージが表示されていた

なので、position: absolute;でレイヤーを重ねるのではなく、条件式で見せない方を非表示にするとよさそう

もしくはGoogleマップgestureHandling: greedyオプションを使うこともできる

developers.google.com

gestureHandling: greedyはすべてのタッチ操作とスクロール イベントに反応させることができる

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "greedy",
});

試してないがこれでもよさそう