Geofield Map
Provides an advanced Google Maps integration for displaying and editing Geofield data in Drupal, including a field widget, formatter, Views style plugin, and map theming capabilities.
geofield_map
インストール
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 Locator Map
Create a store locator by adding a geofield to a Store content type, then creating a View with the Geofield Google Map style. Use the Entity Type Map Themer to assign different marker icons for different store types (e.g., retail, warehouse, outlet). Add a Legend block to help users understand the marker meanings.
Event Location Mapping
For an events website, use the Geofield Map widget to allow content editors to easily place event locations on a map. Enable Google Places Autocomplete for quick address entry, and configure the Geoaddress field to automatically populate a text field with the reverse-geocoded address.
Property Listings with Category Markers
For a real estate site, create a property content type with a geofield and a property type taxonomy (e.g., House, Apartment, Commercial). Use the Taxonomy Term Map Themer to display different marker icons for each property type. Enable marker clustering for areas with many listings.
Interactive Travel Blog
Use the Geofield Map formatter on blog posts to display the location each post is about. Configure infowindows to show rendered entity content with featured images, and use custom map styling for a unique aesthetic that matches the site design.
User Location Collection
For a community site, use the Geofield Map widget with HTML5 Geolocation enabled to let users share their location. Hide the coordinate inputs for simplicity, and show a 'Find my location' button for automatic detection.
Route/Trail Mapping
For hiking or cycling trails, use Geofield's support for complex geometries. Store trail routes as LineStrings in geofield, and use the formatter's map_geometries_options to style the paths with custom colors and widths based on difficulty level using token replacements.
Tips
- Always use 'Image Select' Map Themers instead of 'Image Upload' versions for configuration sync compatibility between environments.
- Enable lazy loading for maps below the fold to improve initial page load performance.
- Use marker clustering when displaying more than 50-100 markers to maintain map performance and usability.
- For performance with many markers, use 'Ajax' infowindow loading instead of pre-rendered entity content.
- Place marker icon files in the configured markers location folder to make them available in the file selection dropdown.
- Use token replacement in icon paths to dynamically assign markers based on entity field values without needing a Map Themer.
- Enable the Geocoder module for more geocoding provider options beyond Google's services.
- Custom map styles can be generated using Google Maps Styling Wizard (https://mapstyle.withgoogle.com/) and pasted into the custom style options.
- The Legend block only works with Views using Map Themers - it reads the themer configuration from the selected view display.
Technical Details
Admin Pages 1
/admin/config/system/geofield-map-settings
Configure global settings for the Geofield Map module including Google Maps API key, geocoder settings, and marker theming options.
権限 1
Hooks 7
hook_geofield_map_latlon_element_alter
Allows modules to add or alter the geofield map element JavaScript settings before rendering the widget.
hook_geofield_map_googlemap_view_style_alter
Allows modules to add or alter the map JavaScript settings for the Views style plugin before rendering.
hook_geofield_map_googlemap_formatter_alter
Allows modules to add or alter the map JavaScript settings for the field formatter before rendering.
hook_geofield_map_views_feature_alter
Allows modules to adjust individual feature/marker properties in the Views style plugin before rendering.
hook_geofield_map_formatter_feature_alter
Allows modules to adjust individual feature/marker properties in the field formatter before rendering.
hook_geofield_map_themer_info_alter
Allows modules to alter Map Themer plugin definitions.
hook_leaflet_tile_layer_info_alter
Allows modules to alter Leaflet tile layer plugin definitions.
Troubleshooting 7
Ensure your Google Maps API Key is correctly configured at /admin/config/system/geofield-map-settings. The API key must have Maps JavaScript API enabled in Google Cloud Console. Check browser console for API errors.
Enable Geocoding API and Places API in your Google Cloud Console project. Ensure billing is enabled for your Google Cloud project as these APIs require an active billing account.
Check that marker files exist in the configured markers location (default: public://geofieldmap_markers). Ensure file extensions match the allowed extensions in settings. For file upload themers, verify files have permanent status.
Use the 'Image Select' versions of Map Themers (ending in 'url') instead of 'Image Upload' versions. The upload versions store file IDs which are not portable between environments.
The Leaflet widget in Geofield Map uses a simplified implementation. For advanced Leaflet features, consider using the dedicated Leaflet module in combination with Geofield.
Use the 'Rendered entity via Ajax' option for infowindow content, which loads entity content only when a marker is clicked instead of pre-rendering all infowindows.
Enable the Overlapping Marker Spiderfier (OMS) option in map settings to spread out overlapping markers when clicked.
Security Notes 3
- Google Maps API keys should be restricted to your domain(s) in Google Cloud Console to prevent unauthorized usage.
- When using private file system for markers, ensure proper access controls are in place.
- The 'configure geofield_map' permission should only be granted to trusted administrators as it allows access to API key configuration.