Styled Google Map

A Geofield formatter that displays geographic locations on customizable, styled Google Maps with extensive configuration options for appearance, popups, clustering, and directions.

styled_google_map
4,670 sites
29
drupal.org
field gui integration theme
geofield google maps maps field formatter views location clustering heatmap directions geolocation
Drupal 8 Drupal 9 Drupal 10 Drupal 11

Install

Drupal 11, 10, 9, 8 v8.x-2.7
composer require 'drupal/styled_google_map:8.x-2.7'

Overview

The Styled Google Map module provides a powerful field formatter for Geofield that renders geographic coordinates on visually customizable Google Maps. The module enables site builders to display location data with custom map styles (supporting JSON styles from Snazzy Maps), custom pin markers, and feature-rich popup windows using the InfoBubble library.

Key capabilities include comprehensive map styling with JSON-based visual customization, configurable popup windows that can display field content or complete view modes, multiple map types (Roadmap, Satellite, Hybrid, Terrain), and full control over map interaction settings like gesture handling, zoom levels, and map controls.

For Views integration, the module provides a style plugin that enables displaying multiple locations on a single map with features like marker clustering using MarkerClusterer, overlapping marker handling with Spiderfier, heatmap visualization, and custom map controls. The module also supports directions functionality, allowing users to calculate routes from their location or a specified address to map markers.

Features

  • Display Geofield locations on Google Maps with extensive customization options for map appearance and behavior
  • Apply custom JSON styles from Snazzy Maps or other style generators to create unique map designs
  • Configure marker popup windows with content from entity fields or complete view modes, with full styling control
  • Views style plugin for displaying multiple locations with marker clustering and overlapping marker spiderfier support
  • Heatmap visualization layer for Views to show location density and patterns
  • Directions functionality to calculate and display routes from user location or address to map markers
  • Custom Views area handler for placing HTML controls at various positions on the map
  • Support for custom pin marker images with optional scaling dimensions
  • Multiple authentication methods: Google Maps API Key or Google Maps API for Work Client ID
  • Gesture handling options for controlling map interaction on desktop and mobile devices

Use Cases

Property Listings with Location Maps

Display real estate properties on a styled map. Create a property content type with a Geofield for location and an image field for the property photo. Configure the Geofield display to use Styled Google Map formatter with popup showing property details. Use custom pin markers and JSON styles matching your site's branding.

Store Locator with Directions

Build a store locator page using Views with the Styled Google Map style plugin. Enable the directions feature so visitors can get driving, walking, or transit directions from their location to any store. Configure marker clustering for areas with many locations.

Event Venue Heatmap

Visualize event attendance patterns using the heatmap feature. Create a view of event locations with the Styled Google Map style, enable heatmap layer, and use an attendance count field as the weight source to show popular areas with higher intensity.

Multi-category Location Display

Display locations from different categories with distinct markers. Use the category source field to add CSS classes to popups for styling by category. Use different pin images for each location type by referencing an image field as the pin source.

Interactive Map with Custom Controls

Create an interactive map view with custom filtering controls. Add the Google Map Control area handler to place buttons, search boxes, or legend content directly on the map at configurable positions like TOP_LEFT or BOTTOM_CENTER.

Tips

  • Use Snazzy Maps (https://snazzymaps.com/) to find and customize JSON styles for your maps. Copy the style JSON directly into the formatter or Views style settings.
  • For better mobile experience, set gesture handling to 'cooperative' to prevent accidental map interactions when scrolling the page.
  • When displaying many markers, enable clustering to improve performance and user experience. Configure the cluster image and text settings to match your site design.
  • Use the spiderfier feature when markers may overlap to allow users to click and expand clustered pins.
  • Override the theme templates (styled-google-map.html.twig) in your theme to customize the map container structure.
  • The module stores initialized map objects in drupalSettings.initialized_styles_google_maps for JavaScript interaction with maps after page load.
  • For Views, add the Google Map Control area handler to place legends, filter buttons, or other interactive elements directly on the map.

Technical Details

Admin Pages 1
Styled Google Map settings /admin/config/services/styled_google_map

Configure the Google Maps API authentication method and additional libraries to load with the map.

Hooks 1
hook_styled_google_map_views_style_alter

Allows other modules to alter the map settings and marker locations when using the Styled Google Map Views style plugin. Can modify map settings, marker properties, and use view context for conditional changes.

Troubleshooting 6
Google Map appears grey or does not show at all

Check that a valid Google Maps API key is configured at /admin/config/services/styled_google_map. Verify the API key has the Google Maps JavaScript API enabled in Google Cloud Console. Check browser console for API error messages.

Map styles are not being applied

Verify the JSON style syntax is valid. Use online JSON validators or the Snazzy Maps format. Empty or malformed JSON will cause styles to fail silently.

Custom pin markers not displaying

Ensure the pin image URL is accessible and the path is correct. The module supports stream wrappers (e.g., module://styled_google_map/pin.png) but file URLs must be resolvable. Check browser network tab for 404 errors on image requests.

Directions feature showing 'Use my current location' not working

Geolocation requires HTTPS. The current location option is automatically hidden when the page is not served over HTTPS. Ensure your site uses SSL.

Marker clustering not working in Views

Verify the cluster_enabled setting is checked in Views style settings. Ensure there are enough markers within proximity to form clusters (controlled by min_size setting, default is 2).

Status report shows API key warning

Since June 2016, Google requires API keys for Maps JavaScript API access. Configure either an API key or Client ID at /admin/config/services/styled_google_map to remove the warning and ensure maps render correctly.

Security Notes 3
  • Protect your Google Maps API key by configuring HTTP referrer restrictions in Google Cloud Console to only allow your domain.
  • If using the popup feature with user-submitted content, be aware that popup HTML is rendered through Drupal's rendering system which provides XSS protection.
  • The module sanitizes style settings and control position values using Xss::filter() to prevent script injection.