Skip to content

fix(google-maps): fix OverlayView, InfoWindow, and AdvancedMarkerElement DX issues#660

Merged
harlan-zw merged 2 commits intomainfrom
fix/google-maps-dx-improvements
Mar 20, 2026
Merged

fix(google-maps): fix OverlayView, InfoWindow, and AdvancedMarkerElement DX issues#660
harlan-zw merged 2 commits intomainfrom
fix/google-maps-dx-improvements

Conversation

@harlan-zw
Copy link
Collaborator

❓ Type of change

  • 🐞 Bug fix
  • 👌 Enhancement

📚 Description

Several Google Maps component bugs discovered during playground testing:

OverlayView not rendering when v-model:open is not used (e.g. with v-if pattern). Vue's boolean casting converted the missing open model prop to false, causing draw() to hide the overlay. Fixed by setting { default: undefined } on the model so undefined !== false.

InfoWindow not toggling on re-click of the same marker. Added isOpen state tracking so clicking an already-open marker's InfoWindow closes it.

InfoWindow not closing previous when opening a new one. Added shared activateInfoWindow on MAP_INJECTION_KEY so only one InfoWindow is open at a time within a map.

AdvancedMarkerElement click deprecation warning. Switched from deprecated addListener('click') to addEventListener('gmp-click') with gmpClickable: true.

AdvancedMarkerElement emits not registered. The complex TS type in defineEmits wasn't being extracted by the Vue SFC compiler. Changed to runtime array syntax.

Also:

  • Removed broken changeQuery button from styled playground page
  • Updated overlay-popup playground with Tailwind styled card content
  • Added regression tests for all fixes

…ent DX issues

- Fix OverlayView not rendering when v-model:open is not used. Vue's boolean
  casting converted the missing prop to false, causing draw() to hide content.
  Fixed with { default: undefined } on the model.

- Fix InfoWindow not toggling on re-click. Added isOpen state tracking so
  clicking the same marker closes the InfoWindow.

- Fix opening a new InfoWindow not closing the previous one. Added shared
  activateInfoWindow on MAP_INJECTION_KEY so only one InfoWindow is open at
  a time within a map.

- Switch AdvancedMarkerElement click from deprecated addListener('click') to
  addEventListener('gmp-click') with gmpClickable: true.

- Fix AdvancedMarkerElement emits not being registered at runtime. Changed
  defineEmits from complex TS type to runtime array syntax.

- Remove broken changeQuery button from styled playground page.

- Update overlay-popup playground to use Tailwind styled card content instead
  of inline styles, showcasing OverlayView's slot flexibility.

- Add regression tests for all fixes.
@vercel
Copy link
Contributor

vercel bot commented Mar 20, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
scripts-playground Ready Ready Preview, Comment Mar 20, 2026 8:09am

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 20, 2026

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/scripts@660

commit: 9ccd54e

@coderabbitai
Copy link

coderabbitai bot commented Mar 20, 2026

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Adds a new Vue SFC demo overlay-popup.vue that renders clickable advanced markers with conditionally shown overlay popups. Introduces a shared InfoWindow activation mechanism: MAP_INJECTION_KEY now provides activateInfoWindow, and ScriptGoogleMaps tracks a module-scoped activeInfoWindow to close previously active windows. AdvancedMarker handling changed to use gmpClickable + DOM gmp-click listeners (added/removed) rather than Google Maps click bindings. ScriptGoogleMapsInfoWindow now toggles open/close and uses the shared activator. ScriptGoogleMapsOverlayView defaults its open model to undefined. Tests and mocks updated accordingly; styled.vue lost its change-query button.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately and concisely summarizes the main changes, specifically naming the three key components (OverlayView, InfoWindow, AdvancedMarkerElement) and their DX fixes.
Description check ✅ Passed The description covers all required sections: type of change is marked, and detailed explanation of bugs fixed is provided. However, it lacks the '🔗 Linked issue' section that is included in the template.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/google-maps-dx-improvements
📝 Coding Plan
  • Generate coding plan for human review comments

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
test/unit/google-maps-regressions.test.ts (1)

15-26: Consider strengthening the overlay model default test.

The current test verifies JavaScript equality semantics (undefined === false) rather than actual component behavior. While this documents the fix's reasoning, consider adding a component mount test that verifies defineModel with { default: undefined } actually produces undefined when the prop is not provided.

That said, the test serves as good regression documentation and the implementation is validated by the playground demo.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@test/unit/google-maps-regressions.test.ts` around lines 15 - 26, Add a real
component mount test that verifies defineModel's default remains undefined when
the prop is not provided: create a small test component that uses defineModel({
open: { default: undefined } }) (or the actual overlay component that declares
v-model:open), mount it with `@vue/test-utils` without passing the open prop, and
assert the resulting prop/state is strictly === undefined (e.g.,
wrapper.props().open === undefined or wrapper.vm.open === undefined); keep the
existing explicit false assertion to confirm only an explicit false hides the
overlay.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/runtime/components/GoogleMaps/ScriptGoogleMapsInfoWindow.vue`:
- Around line 47-48: The two iw.addListener calls use concise arrow bodies with
braces that trigger the max-statements-per-line ESLint rule; change each
callback to a block-style arrow function with the assignment on its own line
(e.g., replace iw.addListener('closeclick', () => { isOpen = false }) and
iw.addListener('close', () => { isOpen = false }) with
iw.addListener('closeclick', () => { isOpen = false; }) split so the assignment
is on its own line inside the block), ensuring each line contains a single
statement and keeping references to iw, addListener, and isOpen unchanged.

---

Nitpick comments:
In `@test/unit/google-maps-regressions.test.ts`:
- Around line 15-26: Add a real component mount test that verifies defineModel's
default remains undefined when the prop is not provided: create a small test
component that uses defineModel({ open: { default: undefined } }) (or the actual
overlay component that declares v-model:open), mount it with `@vue/test-utils`
without passing the open prop, and assert the resulting prop/state is strictly
=== undefined (e.g., wrapper.props().open === undefined or wrapper.vm.open ===
undefined); keep the existing explicit false assertion to confirm only an
explicit false hides the overlay.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce2e5da4-ee7f-41d2-a957-037b82c65cbe

📥 Commits

Reviewing files that changed from the base of the PR and between 5d95da2 and 8dd60d0.

📒 Files selected for processing (9)
  • playground/pages/third-parties/google-maps/overlay-popup.vue
  • playground/pages/third-parties/google-maps/styled.vue
  • src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
  • src/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vue
  • src/runtime/components/GoogleMaps/ScriptGoogleMapsInfoWindow.vue
  • src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
  • src/runtime/components/GoogleMaps/injectionKeys.ts
  • test/unit/__mocks__/google-maps-api.ts
  • test/unit/google-maps-regressions.test.ts
💤 Files with no reviewable changes (1)
  • playground/pages/third-parties/google-maps/styled.vue

@harlan-zw harlan-zw merged commit b65e5db into main Mar 20, 2026
9 of 10 checks passed
@harlan-zw harlan-zw deleted the fix/google-maps-dx-improvements branch March 20, 2026 08:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant