fix(google-maps): detach overlay element on unmount

[harlan-zw]

🔗 Linked issue

Resolves #735

❓ Type of change

• 📖 Documentation
• 🐞 Bug fix
• 👌 Enhancement
• ✨ New feature
• 🧹 Chore
• ⚠️ Breaking change

📚 Description

<ScriptGoogleMapsOverlayView v-if="x"> left its overlay element attached to the Google Maps pane after unmount, leaving a stale node visible on the map. The cause: onRemove() read the anchor through useTemplateRef, but Vue nulls template refs during component unmount before onUnmounted fires (and thus before setMap(null) triggers onRemove). The fix captures the element at onAdd time so onRemove can detach it regardless of ref state. Includes a regression test under test/nuxt-runtime/google-maps-overlay-view.nuxt.test.ts.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
scripts-playground	Ready	Preview, Comment	May 1, 2026 1:49am

[pkg-pr-new]

Open in StackBlitz

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

commit: 9d99eea

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 74600c39-9bc8-46d4-a76d-910c1f97a9b6

📥 Commits

Reviewing files that changed from the base of the PR and between f0e4c06 and 9d99eea.

📒 Files selected for processing (2)

• packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
• test/nuxt-runtime/google-maps-overlay-view.nuxt.test.ts

---

📝 Walkthrough

Walkthrough

The component has been modified to store a reference to the overlay anchor element during the Google Maps onAdd lifecycle event in a variable called attachedEl. During onRemove, this stored reference is used to detach the element rather than relying on the Vue template ref. A test case has been added to verify cleanup behavior when the component is conditionally rendered and unmounted via v-if toggle, ensuring the anchor element is properly removed from the map's pane.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main fix: detaching the overlay element on unmount when the component is removed.
Description check	✅ Passed	The description clearly explains the bug, root cause, and the implemented fix, relating directly to the changeset.
Linked Issues check	✅ Passed	The PR captures the anchor element at onAdd time and detaches it in onRemove, directly addressing issue #735 which requires proper cleanup on component unmount via v-if.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the Google Maps overlay unmount behavior and adding a regression test, with no unrelated modifications present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/google-maps-overlay-unmount

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.}

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