feat: add <ScriptGoogleMapsOverlayView> component#658
feat: add <ScriptGoogleMapsOverlayView> component#658
<ScriptGoogleMapsOverlayView> component#658Conversation
Renders arbitrary Vue slot content at a map lat/lng position with full styling control, solving the limitation of InfoWindow's predefined HTML structure. Includes anchor-based positioning, map interaction blocking, and flash prevention. Closes #657
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis pull request introduces Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes The change introduces heterogeneous modifications across documentation, implementation, and examples. The component implementation contains non-trivial logic for OverlayView abstraction, lat/lng-to-pixel coordinate conversion, anchor-based CSS transforms, prop watching, and overlay remounting. These require careful verification of correctness, prop handling, and edge cases. Documentation completeness and playground example clarity also need assessment. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Important Merge conflicts detected (Beta)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue (1)
99-117: Consider extracting the remount logic.The remount pattern is duplicated for
paneandblockMapInteractionwatchers. This is a minor readability nit.♻️ Optional: extract remount helper
+function remountOverlay() { + if (overlay.value) { + const map = overlay.value.getMap() + overlay.value.setMap(null) + if (map) + overlay.value.setMap(map as google.maps.Map) + } +} + // Pane change requires remount (setMap cycles onRemove + onAdd + draw) -watch(() => props.pane, () => { - if (overlay.value) { - const map = overlay.value.getMap() - overlay.value.setMap(null) - if (map) - overlay.value.setMap(map as google.maps.Map) - } -}) +watch(() => props.pane, remountOverlay) // blockMapInteraction change requires remount to re-apply preventMapHitsAndGesturesFrom -watch(() => props.blockMapInteraction, () => { - if (overlay.value) { - const map = overlay.value.getMap() - overlay.value.setMap(null) - if (map) - overlay.value.setMap(map as google.maps.Map) - } -}) +watch(() => props.blockMapInteraction, remountOverlay)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue` around lines 99 - 117, Duplicate remount logic exists in the two watchers for props.pane and props.blockMapInteraction; extract that into a single helper function (e.g., remountOverlay or doRemount) that checks overlay.value, saves const map = overlay.value.getMap(), calls overlay.value.setMap(null), then if map re-attaches with overlay.value.setMap(map as google.maps.Map); replace both watcher bodies to call this helper to remove duplication and improve readability while keeping existing behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue`:
- Around line 99-117: Duplicate remount logic exists in the two watchers for
props.pane and props.blockMapInteraction; extract that into a single helper
function (e.g., remountOverlay or doRemount) that checks overlay.value, saves
const map = overlay.value.getMap(), calls overlay.value.setMap(null), then if
map re-attaches with overlay.value.setMap(map as google.maps.Map); replace both
watcher bodies to call this helper to remove duplication and improve readability
while keeping existing behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 97d42e34-5104-4f43-98bc-983c6bb22912
📒 Files selected for processing (4)
docs/content/scripts/google-maps.mdplayground/pages/third-parties/google-maps/sfcs.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vuetest/e2e/base.test.ts
1 participant
🔗 Linked issue
Closes #657
❓ Type of change
📚 Description
InfoWindow forces a predefined HTML structure and styling. This adds
<ScriptGoogleMapsOverlayView>, which renders arbitrary Vue slot content at a map lat/lng position with full styling control.Features:
anchorprop controls alignment (e.g.bottom-center,center) via CSS transforms, no layout measurement neededblockMapInteraction(defaulttrue) prevents clicks/drags from propagating to the mapdraw()positions it