全幅埋め込みGoogleマップのスクロール問題をWebページに管理する方法は？

Question

埋め込みマップをウェブページに挿入したいと考えています。
このマップには、ブラウザウィンドウの100％幅があります。つまり、ユーザーがマップ領域の外にマウスを置くための残りの領域はありませんページをスクロールするために。

あなたが想像できるように、ユーザーがページをスクロールするし、その後、行き詰まるGoogleマップでスクロールバーを使用しない限りスクロールバーを使用する-= /これは不愉快な体験です。

ユーザーがスクロール時にページの下部にマウスを置くと、エクスペリエンスが悪化します

状況をさらに難しくするのは、マップがブラウザのビューポートの高さ全体をカバーすると予想されることです。

私たちが考えている現在の解決策（現時点ではユーザーテストのためのリソースはありません）は次のとおりです。 google maps mockup scroll solution

地図の上に大きな半透明のオーバーレイがあります。
ユーザーがその上でをクリックすると、このオーバーレイがを最小化してボタンのような正方形になり、ユーザーがクリックして最大化するオーバーレイをもう一度最大化します。グーグルマップが「有効」（オーバーレイなし）である間、ユーザーは大きなボタンをクリックして自動的にページをスクロールするマップ自体からいくつかの領域を利用できますまたはそれに応じて、前のセクションの終わりまたは次のセクションの始まり。

実装を開始する前に、この状況に最適なユーザーエクスペリエンスを探しています。
提案、代替案、または懸念があれば歓迎します。

Alexey Kolchenko · Accepted Answer

ページをスクロールするのではなく、マップ領域をスクロールするという罠に陥ることは間違いなく悪い体験です。それでも現在のソリューションは複雑すぎるように見え、相互作用への障壁を提供します。

デザインは少し矛盾して見えます。大きなマップ領域は、リーチユーザーがマップコンテンツを操作することを前提としています（プライマリタスク）。したがって、より良いソリューションは、ユーザーの目標に依存します。

とにかく、私の提案は：

地図の操作が個別の大きなタスクであり、やり取りが必要な場合は、それを別のページに置いて、このタスクに集中します。したがって、本当にそれを必要とするユーザーは、マップでの作業経験が豊富ですが、他のユーザーはスキップします。
最初は、最適な縮尺とフォーカスされたオブジェクトで小さなマップコントロールを表示できます。一部のユーザーにとってはそれで十分でしょう。マップを操作する必要があるthouseの場合、コントロールを提供して、マップエリアを拡大/縮小します。これらのユーザーは、マップコントロールを長時間使用し続けるので、マップをスクロールアウトする必要はおそらくありません。
（少し注意が必要です。）ユーザーがマップとやり取りを開始した場合は、より小さいマップ領域を表示し、auto-detectを表示します。マップエリアを拡大して、マップでの作業中に優れたエクスペリエンスを提供するためのシグナルです。ここに「exit」ポイントを設けるのも良いです。図を参照してください（ユーザーにわかりやすくするために、矢印の付いたセクション名が望ましいです）。
最初はスクロールサポート付きの全画面マップを表示しますが、"exit points"を提供します（このソリューションは、ほとんどのユーザーがマップで作業する場合に適しています）
スクロールを使用して拡大縮小トグルコントロールを提供します（ほとんどのユーザーがマップをスキップした場合）。

すべてのポイントは、関心のないユーザーに起こり得るスクロールの問題を最小限に抑え、興味のあるユーザーに優れた体験を提供します。

更新：
それがどのように行われるかに注意を払う Google Maps Embed API ：ユーザーがマップ内をクリックした後にのみ、スクロールのためのスクロールを許可します。これは3番目のオプションです。

George Pligoropoulos · Answer

さらなる説明の後、アレクセイ・コルチェンコが特定のケースに対してより良い解決策を提供したことを認めなければなりません。

したがって、Google Maps APIを使用して独自の動的マップを作成できる場合は、Google Map作成ツールに依存するのではなく、次のようなソリューションを用意できます。

そして彼は私がそれらすべてに同意する利点として次の点を提供します：

クリアは、これがポートフォリオセクションであり、スタートアップの「活気」であることを示しています。
プロジェクトの数を表示する（マーカーを使用してプロジェクトを数えるのは難しい）
マップにはすべてのマーカーが含まれます（マップの縮尺により）
右の半透明のブロックは、ページのスクロールに適しています（マップはスクロールすることでスクロールに応答します）
必要に応じて、地図を全画面に拡大します

ただし、考慮すべきいくつかの短所があります。

まず、ソリューションはかなり大きな画面を必要とし、優れたモバイルエクスペリエンスのために再設計する必要があります。
2番目に、そして最も重要なことに、情報を保存するための独自のデータベースであるGoogle Maps API、地図上のピンをクリックすると長方形を表示するための独自のグラフィックを使用する必要があるため、開発時間がはるかに長くなります。通常は、Googleマップですでに存在するロジックを実装する必要があります。

右側の動的リストを作成するためにGoogle APIを介してGoogleデータベースから情報を取得する中間ソリューションは考慮されていません。

次のWebサイトで、上記のアイデアの実際の最初の実装を体験できます。 http://pligor.com

楽しい！