web-dev-qa-db-ja.com

Googleマップのサイドパネルのマテリアルデザインガイドライン

「古いスタイル」のGoogleマップのアイコンをクリックすると、次のようになります。

InfoWindowが表示され、[詳細]をクリックすると、アイコンの件名のGoogle検索で新しいタブが開きます。

「新しいスタイルの」Googleマップのアイコンをクリックすると、次のようになります。

あなたはより多くの情報マップの外を得て、それから対話することができます。

新しい方法の方が良い理由を理解しています。より多くの情報を表示でき、モバイルフレンドリーで、地図を整理するのに役立ちます。

私の質問は次のとおりです。古いInfoWindowスタイルから新しい "サイドバー"へのこの変更の動機となった特定の マテリアルデザイン ガイドラインはありますか" スタイル? 「マップでInfoWindowsをもう使わないで、代わりにこれを使ってください」のように明白なものがあるとは思えませんが、私が推測しているよりも少し公式なものを探しています。

ボーナス質問:そのサイドバーコンポーネントは何と呼ばれますか?

私が尋ねる理由は次のとおりです:私の仕事では、Google Map APIを使用してさまざまな階層情報を表示する製品があります:ドットをクリックしますマップ上で、マップ上のデータの拡大ビューがポップアップ表示されます。拡大ビュー内をクリックすると、詳細が記載された情報ウィンドウが表示されます。クライアントはそのディスプレイが気に入らないので、マップ上のディスプレイから離れて、この新しいスタイルのサイドバーインターフェースに移行する必要があると考えています。私の控えめな意見よりも少し公式なものを探していますが、マテリアルデザインのドキュメントには何も出てきません。

7
Kevin Workman

tl; dr:シートです。

このパターンは、モバイルのpersistent bottom sheet要素に関連しています。 MDガイドラインでは、このアプローチを説明するときに、具体的にマップの例を参照しています。

デスクトップでは、通常、永続的な下部シートに表示されるコンテンツが、新しいマテリアルシートに移動する場合があります。大きな画面では、インターフェースの左側に配置されたマテリアルシートにボトムシートのコンテンツを表示する方が適切な場合があります。

enter image description here

Android 6が登場したため、マップの実装は少し変形しました(左、上、下に取り付けられています)が、基本的な考え方は同じです。

お気づきのように、Googleは古い情報ウィンドウのアプローチを回避しました。これは、関心のある領域のビューを台無しにしたためです。

8
plainclothes

このマテリアルデザインペインは、@ plainclothesが言っているシートです。もっと技術的に言えば、以前はGoogleがこれをサポートしていませんでしたBottom-Sheetタブレットデバイスの左から来たモバイルデバイスに表示されます。

しかし、現在2016年2月にAndroidが開発者にボトムシートのサポートを提供しています APIバージョン23.2

0
Anuj Sharma