Problem/Motivation

When using custom SVG markers (especially via Data URIs) on high-DPI/Retina screens and iOS/WebKit devices (like iPads), the Google Maps API fails to calculate the intrinsic size of the marker. This causes the API to generate massive div[role="button"] hit targets (often 100x larger than the marker itself). These invisible layers overlap the entire map, intercepting all clicks/touches and preventing users from panning or interacting with other markers.

This occurs because the icon and active_icon objects in styled_google_map.js declare a scaledSize, but omit the size property. Without size, WebKit misreports the SVG dimensions to the Maps API.

Steps to reproduce

  1. Configure a Styled Google Map using an SVG Data URI or a SVG for the pin image.
  2. Ensure the map has multiple markers.
  3. Load the page on an iOS device with Safari or Chrome.
  4. Attempt to pan the map or click adjacent markers. Clicks will be blocked by massive, overlapping transparent div elements generated by the Maps API.

Proposed resolution

Explicitly define the size property alongside scaledSize for both the icon and active_icon configuration objects in js/styled_google_map.js. This forces the Maps API to bound the hitbox strictly to the defined dimensions, overriding WebKit's intrinsic size miscalculation.

Remaining tasks

Review and merge.

User interface changes

None.

API changes

None.

Data model changes

None.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

alex.druhet created an issue. See original summary.

alex.druhet’s picture

Status: Active » Needs review
alex.druhet’s picture

I've created a merge request that explicitly defines the size property alongside scaledSize. Ready for review, thanks!