Geofield Map

DrupalでGeofieldデータを表示・編集するための高度なGoogle Maps統合を提供します。フィールドウィジェット、フォーマッター、Viewsスタイルプラグイン、マップテーマ機能を含みます。

geofield_map
15,869 sites
89
drupal.org
field gui api theme
maps google maps geofield geolocation geocoding mapping Views field widget field formatter markers clustering leaflet
Drupal 10 Drupal 11

インストール

Drupal 11, 10 v11.1.0
composer require 'drupal/geofield_map:^11.1'

概要

Geofield Mapは、Google MapsとGeofieldモジュールを統合するDrupal向けの包括的なマッピングソリューションです。地理データの作成・編集のための直感的なGoogle Mapベースのウィジェット、強力な表示フォーマッター、およびGeofieldデータからマップをレンダリングするためのViewsスタイルプラグインを提供します。

このモジュールは、プラガブルなMap Themerシステムを通じた高度なマーカーテーマ機能を備えており、エンティティタイプ、タクソノミーターム、またはリストフィールド値に基づいて異なるマーカーアイコンを割り当てることができます。また、マップ凡例を表示するためのLegendブロック、マーカークラスタリングサポート、重複マーカーのスパイダー化、カスタムマップスタイリング、ジオコーディング統合、遅延読み込み機能も含まれています。

主な機能として、ウィジェットでのGoogle MapsとLeafletマップライブラリの両方のサポート、Google Places Autocomplete統合、HTML5ジオロケーション、住所フィールドを自動入力する逆ジオコーディング、広範なマップコントロールとズーム設定があります。また、開発者がマップの動作を拡張・カスタマイズするためのhookも提供しています。

Features

  • ドラッグ＆ドロップでマーカーを配置して地理的ポイントを作成・編集するためのGoogle Mapベースのフィールドウィジェット
  • カスタマイズ可能なマーカーとインフォウィンドウを備えたインタラクティブマップとしてGeofieldデータを表示するGoogle Mapフィールドフォーマッター
  • 複数のエンティティを単一のマップ上にマーカーとして表示するViewsスタイルプラグイン（Geofield Google Map）
  • エンティティタイプ/バンドル、タクソノミーターム、またはリストフィールド値に基づいて異なるマーカーアイコンを割り当てるMap Themerプラグインシステム
  • Viewsで設定されたMap Themerに基づいてマップ凡例を表示するLegendブロック
  • ウィジェットでのGoogle MapsとLeaflet.jsライブラリの両方のサポート
  • 住所ジオコーディングのためのGoogle Places Autocomplete統合
  • 代替ジオコーディングプロバイダーのためのGeocoderモジュール統合
  • 自動位置検出のためのHTML5 Geolocationサポート
  • マップ座標から住所フィールドを自動入力する逆ジオコーディング
  • 多数のマーカーを処理するためのMarkerClustererライブラリを使用したマーカークラスタリング
  • 同一位置のマーカーを処理するためのOverlapping Marker Spiderfier（OMS）
  • Google Maps Styling Wizard JSONを使用したカスタムマップスタイリングサポート
  • 多数のマーカーでのパフォーマンス向上のためのAjax読み込みインフォウィンドウコンテンツ
  • ページ読み込みパフォーマンス向上のためのマップの遅延読み込み
  • 広範なマップコントロール設定（ズーム、パン、マップタイプ、スケール、ストリートビュー、フルスクリーン）
  • カスタマイズ可能なパスオプションで複雑なジオメトリ（ポリライン、ポリゴン）をレンダリングするためのGeoJSONサポート
  • 動的なマーカーアイコンとジオメトリオプションのためのToken置換サポート
  • ローカライゼーションのための中国固有のGoogle Maps API URLサポート

Use Cases

店舗検索マップ

StoreコンテンツタイプにGeofieldを追加し、Geofield Google MapスタイルでViewを作成して店舗検索を作成します。Entity Type Map Themerを使用して、異なる店舗タイプ（小売、倉庫、アウトレットなど）に異なるマーカーアイコンを割り当てます。ユーザーがマーカーの意味を理解できるようにLegendブロックを追加します。

イベント位置マッピング

イベントウェブサイトでは、Geofield Mapウィジェットを使用してコンテンツ編集者が簡単にイベント位置をマップ上に配置できます。迅速な住所入力のためにGoogle Places Autocompleteを有効にし、逆ジオコードされた住所でテキストフィールドを自動入力するようにGeoaddressフィールドを設定します。

カテゴリマーカー付き物件リスト

不動産サイトでは、Geofieldと物件タイプタクソノミー（戸建て、マンション、商業施設など）を持つ物件コンテンツタイプを作成します。Taxonomy Term Map Themerを使用して各物件タイプに異なるマーカーアイコンを表示します。多数のリストがあるエリアではマーカークラスタリングを有効にします。

インタラクティブ旅行ブログ

ブログ投稿にGeofield Mapフォーマッターを使用して、各投稿に関連する位置を表示します。インフォウィンドウを設定してアイキャッチ画像付きのレンダリングされたエンティティコンテンツを表示し、サイトデザインに合ったユニークな美的感覚のためにカスタムマップスタイリングを使用します。

ユーザー位置収集

コミュニティサイトでは、HTML5 Geolocationを有効にしたGeofield Mapウィジェットを使用してユーザーが位置を共有できます。シンプルさのために座標入力を非表示にし、自動検出のための「現在地を取得」ボタンを表示します。

ルート/トレイルマッピング

ハイキングやサイクリングのトレイルでは、Geofieldの複雑なジオメトリサポートを使用します。トレイルルートをGeofieldにLineStringとして保存し、フォーマッターのmap_geometries_optionsを使用してToken置換で難易度レベルに基づいたカスタムカラーと幅でパスをスタイリングします。

Tips

  • 環境間の設定同期互換性のために、「Image Upload」Map Themerの代わりに常に「Image Select」を使用してください。
  • ファーストビュー以下のマップでは遅延読み込みを有効にして、初期ページ読み込みパフォーマンスを改善してください。
  • 50〜100以上のマーカーを表示する場合は、マップのパフォーマンスとユーザビリティを維持するためにマーカークラスタリングを使用してください。
  • 多数のマーカーでのパフォーマンスのために、事前レンダリングされたエンティティコンテンツの代わりに「Ajax」インフォウィンドウ読み込みを使用してください。
  • マーカーアイコンファイルを設定されたマーカーの場所フォルダに配置して、ファイル選択ドロップダウンで利用可能にしてください。
  • Map Themerを使用せずに、アイコンパスでToken置換を使用してエンティティフィールド値に基づいて動的にマーカーを割り当てることができます。
  • Googleのサービス以外のジオコーディングプロバイダーオプションを増やすには、Geocoderモジュールを有効にしてください。
  • カスタムマップスタイルはGoogle Maps Styling Wizard（https://mapstyle.withgoogle.com/）で生成し、カスタムスタイルオプションに貼り付けることができます。
  • LegendブロックはMap Themerを使用するViewsでのみ動作します - 選択されたView表示からthemer設定を読み取ります。

Technical Details

Admin Pages 1
Geofield Map設定 /admin/config/system/geofield-map-settings

Google Maps APIキー、ジオコーダー設定、マーカーテーマオプションを含むGeofield Mapモジュールのグローバル設定を構成します。

権限 1
Geofield Mapの設定

ユーザーがGeofield Map設定にアクセスして構成することを許可します。この権限を持つユーザーには、マップウィジェットで追加の設定メッセージと警告が表示されます。

Hooks 7
hook_geofield_map_latlon_element_alter

ウィジェットをレンダリングする前に、モジュールがGeofield Map要素のJavaScript設定を追加または変更することを許可します。

hook_geofield_map_googlemap_view_style_alter

レンダリング前に、モジュールがViewsスタイルプラグインのマップJavaScript設定を追加または変更することを許可します。

hook_geofield_map_googlemap_formatter_alter

レンダリング前に、モジュールがフィールドフォーマッターのマップJavaScript設定を追加または変更することを許可します。

hook_geofield_map_views_feature_alter

レンダリング前に、モジュールがViewsスタイルプラグインの個々の機能/マーカープロパティを調整することを許可します。

hook_geofield_map_formatter_feature_alter

レンダリング前に、モジュールがフィールドフォーマッターの個々の機能/マーカープロパティを調整することを許可します。

hook_geofield_map_themer_info_alter

モジュールがMap Themerプラグイン定義を変更することを許可します。

hook_leaflet_tile_layer_info_alter

モジュールがLeafletタイルレイヤープラグイン定義を変更することを許可します。

Troubleshooting 7
マップが表示されない、またはグレーのエリアが表示される

Google Maps APIキーが/admin/config/system/geofield-map-settingsで正しく設定されていることを確認してください。APIキーはGoogle Cloud ConsoleでMaps JavaScript APIが有効になっている必要があります。ブラウザコンソールでAPIエラーを確認してください。

ジオコーディング/Places autocompleteが動作しない

Google Cloud Consoleプロジェクトで Geocoding APIとPlaces APIを有効にしてください。これらのAPIにはアクティブな課金アカウントが必要なため、Google Cloudプロジェクトで課金が有効になっていることを確認してください。

カスタムマーカーアイコンが表示されない

設定されたマーカーの場所（デフォルト: public://geofieldmap_markers）にマーカーファイルが存在することを確認してください。ファイル拡張子が設定で許可されている拡張子と一致していることを確認してください。ファイルアップロードthemerの場合、ファイルが永続的なステータスを持っていることを確認してください。

Map Themer設定が設定エクスポートで保存されない

「Image Upload」バージョンの代わりに「Image Select」バージョンのMap Themer（「url」で終わるもの）を使用してください。アップロードバージョンは環境間で移植可能ではないファイルIDを保存します。

Leafletウィジェットがタイルを表示するがマップコントロールがない

Geofield MapのLeafletウィジェットは簡略化された実装を使用しています。高度なLeaflet機能については、Geofieldと組み合わせて専用のLeafletモジュールの使用を検討してください。

多数のマーカーでインフォウィンドウがマップの読み込みを遅くする

インフォウィンドウコンテンツに「Rendered entity via Ajax」オプションを使用してください。これにより、すべてのインフォウィンドウを事前レンダリングする代わりに、マーカーがクリックされたときにのみエンティティコンテンツを読み込みます。

マーカーが重なってクリックできない

マップ設定でOverlapping Marker Spiderfier（OMS）オプションを有効にして、クリック時に重なっているマーカーを広げて表示します。

Security Notes 3
  • Google Maps APIキーは、不正使用を防ぐためにGoogle Cloud Consoleでドメインに制限する必要があります。
  • マーカーにプライベートファイルシステムを使用する場合は、適切なアクセス制御が設定されていることを確認してください。
  • 「configure geofield_map」権限は、APIキー設定へのアクセスを許可するため、信頼できる管理者にのみ付与する必要があります。