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
- Configure a Styled Google Map using an SVG Data URI or a SVG for the pin image.
- Ensure the map has multiple markers.
- Load the page on an iOS device with Safari or Chrome.
- 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.
Issue fork styled_google_map-3583936
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
Comment #3
alex.druhetComment #4
alex.druhetI've created a merge request that explicitly defines the
sizeproperty alongsidescaledSize. Ready for review, thanks!