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

15,869 sites

drupal.org

maps google maps geofield geolocation geocoding mapping Views field widget field formatter markers clustering leaflet

Drupal 10 Drupal 11

Install

Drupal 11, 10 v11.1.0

composer require 'drupal/geofield_map:^11.1'

Overview

Geofield Map is a comprehensive mapping solution for Drupal that integrates Google Maps with the Geofield module. It provides an intuitive Google Map-based widget for creating and editing geographic data, along with powerful display formatters and a Views style plugin for rendering maps from geofield data.

The module features advanced marker theming capabilities through a pluggable Map Themer system, allowing different marker icons to be assigned based on entity type, taxonomy terms, or list field values. It also includes a Legend block for displaying map legends, marker clustering support, overlapping marker spiderfication, custom map styling, geocoding integration, and lazy loading.

Key features include support for both Google Maps and Leaflet map libraries in the widget, Google Places Autocomplete integration, HTML5 geolocation, reverse geocoding to automatically populate address fields, and extensive map controls and zoom settings. The module also provides hooks for developers to extend and customize map behavior.

Features

Google Map-based field widget for creating and editing geographic points with drag-and-drop marker placement
Google Map field formatter for displaying geofield data as interactive maps with customizable markers and infowindows
Views style plugin (Geofield Google Map) for displaying multiple entities as markers on a single map
Map Themer plugin system for assigning different marker icons based on entity type/bundle, taxonomy terms, or list field values
Legend block for displaying map legends based on configured Map Themers in Views
Support for both Google Maps and Leaflet.js libraries in the widget
Google Places Autocomplete integration for address geocoding
Geocoder module integration for alternative geocoding providers
HTML5 Geolocation support for automatic location detection
Reverse geocoding to automatically populate address fields from map coordinates
Marker clustering using MarkerClusterer library for handling large numbers of markers
Overlapping Marker Spiderfier (OMS) for handling markers at the same location
Custom map styling support using Google Maps Styling Wizard JSON
Ajax-loaded infowindow content for improved performance with many markers
Lazy loading of maps for better page load performance
Extensive map controls configuration (zoom, pan, map types, scale, street view, fullscreen)
GeoJSON support for rendering complex geometries (polylines, polygons) with customizable path options
Token replacement support for dynamic marker icons and geometry options
China-specific Google Maps API URL support for localization

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.

Dependencies

Geofield Required

Related Projects

Geofield

Core dependency providing the geofield field type that stores geographic data in WKT/WKB format.

Geocoder

Optional integration providing alternative geocoding providers beyond Google Maps Geocoder. When enabled, allows address search using various geocoding services.

Leaflet

Optional integration. When the Leaflet module is installed, its library is used instead of the bundled version for the widget's Leaflet map mode.

Token

Optional integration for token replacement in icon image paths and geometry options, enabling dynamic marker icons based on entity field values.

SVG Image

Optional integration enabling SVG file support for marker icons. When installed, SVG files can be uploaded and used as custom markers.

Search API

The Views style plugin supports Search API views, automatically detecting the entity type from Search API index configuration.

Views Core

Core integration providing the Geofield Google Map Views style plugin for displaying view results as map markers.

Technical Details

Geofield Map Settings /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.

Configure Geofield Map

Allows users to access and configure Geofield Map settings. Users with this permission see additional configuration messages and warnings in the map widgets.

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.

Map not displaying or showing gray area

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.

Geocoding/Places autocomplete not working

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.

Custom marker icons not appearing

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.

Map Themer settings not saving with config export

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.

Leaflet widget shows tiles but no map controls

The Leaflet widget in Geofield Map uses a simplified implementation. For advanced Leaflet features, consider using the dedicated Leaflet module in combination with Geofield.

Infowindows cause slow map loading with many markers

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.

Markers overlap and are not clickable

Enable the Overlapping Marker Spiderfier (OMS) option in map settings to spread out overlapping markers when clicked.

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.