Styled Google Map
地理的な位置情報をカスタマイズ可能なスタイル付きGoogle Maps上に表示するGeofieldフォーマッターです。外観、ポップアップ、クラスタリング、ルート案内に関する豊富な設定オプションを提供します。
styled_google_map
インストール
composer require 'drupal/styled_google_map:8.x-2.7'
概要
Styled Google Mapモジュールは、地理座標を視覚的にカスタマイズ可能なGoogle Maps上にレンダリングする、Geofield向けの強力なフィールドフォーマッターを提供します。このモジュールにより、サイト構築者はカスタムマップスタイル（Snazzy MapsのJSONスタイルに対応）、カスタムピンマーカー、InfoBubbleライブラリを使用した機能豊富なポップアップウィンドウを使って位置情報データを表示できます。
主な機能には、JSONベースのビジュアルカスタマイズによる包括的なマップスタイリング、フィールドコンテンツまたは完全なビューモードを表示できる設定可能なポップアップウィンドウ、複数のマップタイプ（ロードマップ、衛星、ハイブリッド、地形）、ジェスチャー操作、ズームレベル、マップコントロールなどのマップインタラクション設定の完全な制御が含まれます。
Views連携では、MarkerClustererを使用したマーカークラスタリング、Spiderfierによる重複マーカー処理、ヒートマップ可視化、カスタムマップコントロールなどの機能を備え、単一のマップ上に複数の位置を表示できるスタイルプラグインを提供します。また、ルート案内機能もサポートしており、ユーザーは自分の位置や指定した住所からマップマーカーまでのルートを計算できます。
Features
- Geofieldの位置情報をGoogle Maps上に表示し、マップの外観と動作に関する豊富なカスタマイズオプションを提供
- Snazzy Mapsやその他のスタイルジェネレーターからのカスタムJSONスタイルを適用して、独自のマップデザインを作成
- マーカーのポップアップウィンドウにエンティティフィールドまたは完全なビューモードのコンテンツを表示し、フルスタイリング制御が可能
- Viewsスタイルプラグインにより、マーカークラスタリングと重複マーカーのSpiderfierサポートで複数の位置を表示
- Viewsのヒートマップ可視化レイヤーで位置の密度とパターンを表示
- ルート案内機能により、ユーザーの位置または住所からマップマーカーまでのルートを計算・表示
- カスタムViews areaハンドラーで、マップ上のさまざまな位置にHTMLコントロールを配置
- オプションのスケーリング寸法を持つカスタムピンマーカー画像のサポート
- 複数の認証方法：Google Maps APIキーまたはGoogle Maps API for WorkクライアントID
- デスクトップおよびモバイルデバイスでのマップ操作を制御するジェスチャー操作オプション
Use Cases
位置情報付き物件リスト
不動産物件をスタイル付きマップ上に表示します。位置用のGeofieldと物件写真用の画像フィールドを持つ物件コンテンツタイプを作成します。Geofieldの表示をStyled Google Mapフォーマッターで設定し、ポップアップに物件詳細を表示します。サイトのブランディングに合わせたカスタムピンマーカーとJSONスタイルを使用します。
ルート案内付き店舗検索
Styled Google Mapスタイルプラグインを使用したViewsで店舗検索ページを構築します。ルート案内機能を有効にして、訪問者が自分の位置から任意の店舗への車、徒歩、または公共交通機関のルートを取得できるようにします。多くの店舗がある地域ではマーカークラスタリングを設定します。
イベント会場のヒートマップ
ヒートマップ機能を使用してイベント参加パターンを可視化します。Styled Google Mapスタイルでイベント位置のビューを作成し、ヒートマップレイヤーを有効にし、参加者数フィールドをウェイトソースとして使用して人気エリアをより高い強度で表示します。
マルチカテゴリの位置表示
異なるカテゴリの位置を区別可能なマーカーで表示します。カテゴリソースフィールドを使用してポップアップにCSSクラスを追加し、カテゴリ別にスタイリングします。画像フィールドをピンソースとして参照することで、位置タイプごとに異なるピン画像を使用します。
カスタムコントロール付きインタラクティブマップ
カスタムフィルタリングコントロールを持つインタラクティブなマップビューを作成します。Google Map Control areaハンドラーを追加して、TOP_LEFTやBOTTOM_CENTERなど設定可能な位置にボタン、検索ボックス、または凡例コンテンツをマップ上に直接配置します。
Tips
- Snazzy Maps (https://snazzymaps.com/) を使用してマップ用のJSONスタイルを検索しカスタマイズできます。スタイルJSONをフォーマッターまたはViewsスタイル設定に直接コピーしてください。
- より良いモバイル体験のために、ジェスチャー操作を「cooperative」に設定して、ページスクロール時の意図しないマップ操作を防ぎます。
- 多くのマーカーを表示する場合は、パフォーマンスとユーザーエクスペリエンスを向上させるためにクラスタリングを有効にします。サイトデザインに合わせてクラスター画像とテキスト設定を設定してください。
- マーカーが重なる可能性がある場合は、Spiderfier機能を使用して、ユーザーがクリックしてクラスター化されたピンを展開できるようにします。
- テーマでテーマテンプレート（styled-google-map.html.twig）をオーバーライドして、マップコンテナ構造をカスタマイズできます。
- モジュールは初期化されたマップオブジェクトをdrupalSettings.initialized_styles_google_mapsに保存し、ページ読み込み後のマップとのJavaScript連携に使用できます。
- Viewsでは、Google Map Control areaハンドラーを追加して、凡例、フィルターボタン、その他のインタラクティブ要素をマップ上に直接配置できます。
Technical Details
Admin Pages 1
/admin/config/services/styled_google_map
Google Maps API認証方法とマップと一緒に読み込む追加ライブラリを設定します。
Hooks 1
hook_styled_google_map_views_style_alter
Styled Google Map Viewsスタイルプラグイン使用時に、他のモジュールがマップ設定とマーカー位置を変更できるようにします。マップ設定、マーカープロパティの変更、条件付き変更のためのViewコンテキストの使用が可能です。
Troubleshooting 6
/admin/config/services/styled_google_mapで有効なGoogle Maps APIキーが設定されていることを確認してください。Google Cloud ConsoleでAPIキーにGoogle Maps JavaScript APIが有効になっていることを確認します。ブラウザコンソールでAPIエラーメッセージを確認してください。
JSONスタイルの構文が有効であることを確認してください。オンラインJSONバリデーターまたはSnazzy Mapsフォーマットを使用します。空または不正なJSONはスタイルが静かに失敗する原因となります。
ピン画像のURLがアクセス可能で、パスが正しいことを確認してください。モジュールはストリームラッパー（例：module://styled_google_map/pin.png）をサポートしますが、ファイルURLは解決可能である必要があります。ブラウザのネットワークタブで画像リクエストの404エラーを確認してください。
位置情報取得にはHTTPSが必要です。ページがHTTPSで提供されていない場合、現在地オプションは自動的に非表示になります。サイトがSSLを使用していることを確認してください。
Viewsスタイル設定でcluster_enabled設定がチェックされていることを確認してください。クラスターを形成するのに十分なマーカーが近接範囲内にあることを確認します（min_size設定で制御、デフォルトは2）。
2016年6月以降、GoogleはMaps JavaScript APIアクセスにAPIキーを必要とします。/admin/config/services/styled_google_mapでAPIキーまたはクライアントIDを設定して、警告を削除し、マップが正しくレンダリングされるようにしてください。
Security Notes 3
- Google Cloud ConsoleでHTTPリファラー制限を設定し、自分のドメインのみを許可することでGoogle Maps APIキーを保護してください。
- ユーザー送信コンテンツでポップアップ機能を使用する場合、ポップアップHTMLはXSS保護を提供するDrupalのレンダリングシステムを通じてレンダリングされることに注意してください。
- モジュールはスクリプトインジェクションを防ぐために、Xss::filter()を使用してスタイル設定とコントロール位置の値をサニタイズします。