Merged
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughAdds extensive Google Maps documentation pages and navigation entries, introduces a new ScriptGoogleMapsOverlayView component, and adds GeoJSON support. Refactors event wiring across multiple Google Maps components to use a new exported bindGoogleMapsEvents helper. Adds/updates runtime components: ScriptGoogleMaps (new optional zoom prop, renamed resolveQueryToLatLng), ScriptGoogleMapsAdvancedMarkerElement (new position prop, slot-driven content, readiness gating), ScriptGoogleMapsMarker (position prop and warnings), and several overlay/shape components. Updates playground examples, registry generation mapping, and registry-types.json to reflect changed events and new GeoJSON props/events. Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vue (1)
22-47:⚠️ Potential issue | 🟠 MajorRemove unsupported event listeners from AdvancedMarkerElement.
The
eventsWithoutPayloadlist contains events likeanimation_changed,icon_changed, andposition_changedthat belong to the legacygoogle.maps.Markerclass. TheeventsWithMapMouseEventPayloadlist includescontextmenu,dblclick,mousedown,mouseout, andmouseover—none of which are supported byAdvancedMarkerElement.
AdvancedMarkerElementonly supports:click(orgmp-click),drag,dragstart, anddragend. Registering listeners for unsupported events will silently fail to fire, creating misleading code. Update both event lists to include only supported events and remove the legacy ones.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vue` around lines 22 - 47, The event arrays eventsWithoutPayload and eventsWithMapMouseEventPayload include legacy and unsupported events for AdvancedMarkerElement; update them so only AdvancedMarkerElement-supported events remain: include 'click' (and note 'gmp-click' is the custom event name used elsewhere), 'drag', 'dragstart', and 'dragend', and remove legacy marker events like 'animation_changed', 'icon_changed', 'position_changed' and unsupported mouse events such as 'contextmenu', 'dblclick', 'mousedown', 'mouseout', and 'mouseover'; adjust any registration logic that iterates over eventsWithoutPayload or eventsWithMapMouseEventPayload in this component to rely only on these four supported events so listeners won't be created for unsupported AdvancedMarkerElement events.
🧹 Nitpick comments (7)
test/e2e/base.test.ts (1)
23-23: Avoid hard-coding hashed asset names in e2e assertionsLine 23 currently asserts an exact content hash, which is fragile across valid bundle changes. Prefer matching a stable path pattern so the test verifies behavior, not build artifacts.
Proposed change
- expect(text).toMatchInlineSnapshot(`"/foo/_scripts/assets/PHzhM8DFXcXVSSJF110cyV3pjg9cp8oWv_f4Dk2ax1w.js"`) + expect(text).toMatch(/^\/foo\/_scripts\/assets\/[A-Za-z0-9_-]+\.js$/)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@test/e2e/base.test.ts` at line 23, The test currently hard-codes a hashed filename in the assertion using expect(text).toMatchInlineSnapshot which is brittle; replace that exact-snapshot assertion with a pattern-based assertion that matches the stable path structure (e.g., assert that the variable text matches a regex or uses expect.stringMatching) so the test checks for "/foo/_scripts/assets/" followed by any asset name ending in ".js" rather than a specific hash; update the assertion referencing the variable text and the call expect(text).toMatchInlineSnapshot to use a regex/string-matching form instead.src/runtime/components/GoogleMaps/bindGoogleMapsEvents.ts (1)
8-21: CorrectaddListenerreturn type to align with the Maps API.The current signature incorrectly models
addListeneras returningvoid, when it actually returnsgoogle.maps.MapsEventListener. While capturing returned listeners for granular cleanup is not currently used in the codebase (cleanup relies onclearInstanceListeners), tightening this typing remains valuable for better type safety. Additionally, consider improving parameter types fromany[]tounknown[]for stricter type checking.Proposed refactor
export function bindGoogleMapsEvents( - instance: { addListener: (event: string, handler: (...args: any[]) => void) => void }, - emit: (...args: any[]) => void, + instance: { addListener: (event: string, handler: (...args: unknown[]) => void) => google.maps.MapsEventListener }, + emit: (...args: unknown[]) => void, config: { noPayload?: readonly string[] withPayload?: readonly string[] }, ) { config.noPayload?.forEach((event) => { - instance.addListener(event, () => emit(event)) + instance.addListener(event, () => emit(event)) }) config.withPayload?.forEach((event) => { - instance.addListener(event, (payload: any) => emit(event, payload)) + instance.addListener(event, (payload: unknown) => emit(event, payload)) }) }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/runtime/components/GoogleMaps/bindGoogleMapsEvents.ts` around lines 8 - 21, The bindGoogleMapsEvents function currently types instance.addListener as returning void and uses (...args: any[]) => void for handlers; update the signature so addListener returns google.maps.MapsEventListener (or MapsEventListener) and tighten handler parameter types to (...args: unknown[]) => void; adjust the instance parameter type in bindGoogleMapsEvents accordingly and keep emit typed as before, ensuring config.noPayload and config.withPayload handlers match the new signature so consumers get correct Maps API listener types for potential future cleanup.src/runtime/components/GoogleMaps/ScriptGoogleMapsMarker.vue (1)
22-24: Deprecation warning fires on every component instantiation.This warning will trigger once per
ScriptGoogleMapsMarkermount, which could be noisy for apps rendering many markers. Consider debouncing or emitting once per session using a module-level flag.💡 Proposed fix to warn once per session
+let hasWarnedDeprecation = false + if (import.meta.dev) { - console.warn('[nuxt-scripts] ScriptGoogleMapsMarker uses the deprecated google.maps.Marker class. Use ScriptGoogleMapsAdvancedMarkerElement instead.') + if (!hasWarnedDeprecation) { + hasWarnedDeprecation = true + console.warn('[nuxt-scripts] ScriptGoogleMapsMarker uses the deprecated google.maps.Marker class. Use ScriptGoogleMapsAdvancedMarkerElement instead.') + } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/runtime/components/GoogleMaps/ScriptGoogleMapsMarker.vue` around lines 22 - 24, The deprecation warning in ScriptGoogleMapsMarker currently runs on every mount; add a module-level flag (e.g., warnedDeprecatedMarker) and only log when import.meta.dev is true and the flag is false, then set the flag to true so subsequent instantiations skip the console.warn; locate the existing import.meta.dev check in ScriptGoogleMapsMarker and wrap it with the new flag condition to ensure the message logs once per session.src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue (1)
165-183: Consider extracting duplicate remount logic.Both
paneandblockMapInteractionwatchers use identical remount logic. This could be extracted to a helper function for maintainability.♻️ Proposed refactor to 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 165 - 183, Extract the duplicated remount logic used in both watchers into a helper function (e.g., remountOverlay) that checks overlay.value, captures map via overlay.value.getMap(), calls overlay.value.setMap(null), and if map exists restores it with overlay.value.setMap(map as google.maps.Map); then replace the bodies of the pane watcher (watch(() => props.pane, ...)) and the blockMapInteraction watcher (watch(() => props.blockMapInteraction, ...)) to simply call that helper, preserving existing behavior and typings for overlay.value, getMap and setMap.docs/content/scripts/google-maps/1.guides/2.programmatic-api.md (1)
109-123: Add listener cleanup in the event-subscription example.The sample registers native listeners but never removes them; show cleanup to avoid leaks in copied implementations.
Suggested edit
-function onReady({ map }) { - watch(map, (m) => { +function onReady({ map }) { + watch(map, (m, _prev, onCleanup) => { if (!m) return - m.addListener('zoom_changed', () => { + const listeners = [ + m.addListener('zoom_changed', () => { console.log('Zoom:', m.getZoom()) - }) - m.addListener('center_changed', () => { + }), + m.addListener('center_changed', () => { console.log('Center:', m.getCenter()?.toJSON()) - }) - m.addListener('idle', () => { + }), + m.addListener('idle', () => { // Map finished moving, good time to fetch data for visible bounds const bounds = m.getBounds() - }) + }), + ] + onCleanup(() => listeners.forEach(l => l.remove())) }, { immediate: true }) }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/scripts/google-maps/1.guides/2.programmatic-api.md` around lines 109 - 123, The example registers native listeners with m.addListener but never removes them, causing leaks; update the watch callback in onReady to collect each MapsEventListener returned by m.addListener (for 'zoom_changed', 'center_changed', 'idle') into an array and return a cleanup function from the watch callback that calls remove() on each listener (and clears the array) so listeners are removed when the map changes or the watcher stops.docs/content/scripts/google-maps/1.guides/4.billing.md (1)
16-25: Consider adding a note that pricing may change.Google Maps pricing is subject to change. The specific per-1000 costs ($2, $7, $5, $17) and the $200/month free credit mentioned later may become outdated. Consider adding a note directing readers to Google's official pricing page for current rates.
📝 Suggested addition after line 25
| Location query resolved client-side | Places API | $17 | Fallback when geocode proxy is not enabled | + +::callout{color="gray"} +Prices shown are estimates as of 2024. Check [Google Maps Platform Pricing](https://mapsplatform.google.com/pricing/) for current rates. +::🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/scripts/google-maps/1.guides/4.billing.md` around lines 16 - 25, Add a short disclaimer after the "Cost Breakdown" table stating that Google Maps pricing may change and to always consult Google's official pricing page for current rates and the latest $200/month credit details; reference the "Cost Breakdown" heading and the table rows (Static Maps API, Maps JavaScript API, Geocoding API, Places API) so the note appears immediately after the table and before subsequent sections.docs/content/scripts/google-maps/1.guides/3.map-styling.md (1)
83-83: Minor grammar: Use hyphen in compound adjective."Custom styled" should be hyphenated when used as a compound adjective modifying "maps".
📝 Suggested fix
-Custom styled maps pair well with custom marker content for a cohesive look: +Custom-styled maps pair well with custom marker content for a cohesive look:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/scripts/google-maps/1.guides/3.map-styling.md` at line 83, Change the phrase "Custom styled maps pair well with custom marker content for a cohesive look:" to use a hyphenated compound adjective — replace "Custom styled maps" with "Custom-styled maps" so the sentence reads "Custom-styled maps pair well with custom marker content for a cohesive look:".
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/content/scripts/google-maps/2.api/1.script-google-maps.md`:
- Line 13: The heading "Key Props" currently uses an H3 (###) and should be
changed to an H2 (##) to satisfy markdown hierarchy rules and avoid MD001;
locate the "### Key Props" line in the document and replace the leading "###"
with "##" so the heading reads "## Key Props".
- Line 11: The docs currently assert conflicting defaults and use an invalid
event name ("mouseclick"); update both occurrences that mention default trigger
events so they match the actual runtime defaults—replace "mouseclick" with
"click" and ensure both lines state the same defaults (e.g., "mouseover" and
"click") so the documentation is consistent with the real behavior.
- Around line 83-84: The slot descriptions for awaitingLoad and loading are
ambiguous because they both state the same behavior; update the docs to clearly
distinguish lifecycle phases by describing that the awaitingLoad slot is
rendered before the Maps API script is requested or while waiting for the
initial API handshake (pre-network or pre-initialization), whereas the loading
slot is rendered after the script request has started but before the map
instance is fully initialized (in-flight network/initialization); modify the
descriptions for the awaitingLoad and loading slots (also the duplicated docs at
lines 99-100) to state these exact phases and give a short example use-case for
each.
- Line 120: The sentence asserting that providing your own placeholder slot
"won't incur charges for the Static Maps API" is too absolute; change the
wording around the `placeholder` slot to clarify that charges are avoided only
when the provided placeholder URL is used in place of any Static Maps API
requests (i.e., no Static Maps requests are made or rendered), and note that if
the placeholder URL itself triggers a Static Maps request or the original static
map is still requested/rendered then normal Static Maps billing may apply;
update the similar phrasing in the adjacent lines (the other mention of the
`placeholder` slot) to match this conditional wording referencing the
`placeholder` slot and the Static Maps API.
In `@docs/content/scripts/google-maps/2.api/11.heatmap-layer.md`:
- Around line 12-31: The page documents the deprecated HeatmapLayer component
(ScriptGoogleMapsHeatmapLayer) which is unavailable as of March 2026; remove or
rewrite this doc: delete the example and references to
ScriptGoogleMapsHeatmapLayer/HeatmapLayer and instead add a clear notice that
HeatmapLayer was deprecated (May 2025) and removed (May 2026), and recommend
third-party alternatives (e.g., deck.gl HeatmapLayer) with a brief migration
note pointing users to use ScriptGoogleMaps only for supported components and to
evaluate deck.gl or other libraries for heatmap visualizations.
In `@docs/content/scripts/google-maps/2.api/13.use-script-google-maps.md`:
- Line 5: The lead sentence uses "fine-grain" instead of the correct adjective
"fine-grained"; update the documentation string that mentions the
useScriptGoogleMaps() composable to read "fine-grained control" instead of
"fine-grain control" so the sentence correctly reads that useScriptGoogleMaps()
provides a way to load the Google Maps SDK and interact with it programmatically
with fine-grained control.
- Line 26: The docs example unnecessarily double-casts the maps value; replace
the line that does "const maps = await instance.maps as any as typeof
google.maps" with a plain await of instance.maps to match production usage (use
"const maps = await instance.maps") so the example aligns with the runtime code
that assigns mapsApi.value = await instance.maps and avoids the redundant "as
any as typeof google.maps" casts.
In `@docs/content/scripts/google-maps/index.md`:
- Line 123: Replace the hardcoded API key in the google maps demo by removing
the literal value used in the api-key attribute
(api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU") and either (a) substitute a
placeholder like api-key="YOUR_API_KEY" to match other examples, or (b) keep a
placeholder and add a short inline note that a restricted/demo key was used and
production keys should come from environment configuration; ensure the api-key
attribute and the surrounding example text/reference to Setup remain consistent.
---
Outside diff comments:
In `@src/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vue`:
- Around line 22-47: The event arrays eventsWithoutPayload and
eventsWithMapMouseEventPayload include legacy and unsupported events for
AdvancedMarkerElement; update them so only AdvancedMarkerElement-supported
events remain: include 'click' (and note 'gmp-click' is the custom event name
used elsewhere), 'drag', 'dragstart', and 'dragend', and remove legacy marker
events like 'animation_changed', 'icon_changed', 'position_changed' and
unsupported mouse events such as 'contextmenu', 'dblclick', 'mousedown',
'mouseout', and 'mouseover'; adjust any registration logic that iterates over
eventsWithoutPayload or eventsWithMapMouseEventPayload in this component to rely
only on these four supported events so listeners won't be created for
unsupported AdvancedMarkerElement events.
---
Nitpick comments:
In `@docs/content/scripts/google-maps/1.guides/2.programmatic-api.md`:
- Around line 109-123: The example registers native listeners with m.addListener
but never removes them, causing leaks; update the watch callback in onReady to
collect each MapsEventListener returned by m.addListener (for 'zoom_changed',
'center_changed', 'idle') into an array and return a cleanup function from the
watch callback that calls remove() on each listener (and clears the array) so
listeners are removed when the map changes or the watcher stops.
In `@docs/content/scripts/google-maps/1.guides/3.map-styling.md`:
- Line 83: Change the phrase "Custom styled maps pair well with custom marker
content for a cohesive look:" to use a hyphenated compound adjective — replace
"Custom styled maps" with "Custom-styled maps" so the sentence reads
"Custom-styled maps pair well with custom marker content for a cohesive look:".
In `@docs/content/scripts/google-maps/1.guides/4.billing.md`:
- Around line 16-25: Add a short disclaimer after the "Cost Breakdown" table
stating that Google Maps pricing may change and to always consult Google's
official pricing page for current rates and the latest $200/month credit
details; reference the "Cost Breakdown" heading and the table rows (Static Maps
API, Maps JavaScript API, Geocoding API, Places API) so the note appears
immediately after the table and before subsequent sections.
In `@src/runtime/components/GoogleMaps/bindGoogleMapsEvents.ts`:
- Around line 8-21: The bindGoogleMapsEvents function currently types
instance.addListener as returning void and uses (...args: any[]) => void for
handlers; update the signature so addListener returns
google.maps.MapsEventListener (or MapsEventListener) and tighten handler
parameter types to (...args: unknown[]) => void; adjust the instance parameter
type in bindGoogleMapsEvents accordingly and keep emit typed as before, ensuring
config.noPayload and config.withPayload handlers match the new signature so
consumers get correct Maps API listener types for potential future cleanup.
In `@src/runtime/components/GoogleMaps/ScriptGoogleMapsMarker.vue`:
- Around line 22-24: The deprecation warning in ScriptGoogleMapsMarker currently
runs on every mount; add a module-level flag (e.g., warnedDeprecatedMarker) and
only log when import.meta.dev is true and the flag is false, then set the flag
to true so subsequent instantiations skip the console.warn; locate the existing
import.meta.dev check in ScriptGoogleMapsMarker and wrap it with the new flag
condition to ensure the message logs once per session.
In `@src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue`:
- Around line 165-183: Extract the duplicated remount logic used in both
watchers into a helper function (e.g., remountOverlay) that checks
overlay.value, captures map via overlay.value.getMap(), calls
overlay.value.setMap(null), and if map exists restores it with
overlay.value.setMap(map as google.maps.Map); then replace the bodies of the
pane watcher (watch(() => props.pane, ...)) and the blockMapInteraction watcher
(watch(() => props.blockMapInteraction, ...)) to simply call that helper,
preserving existing behavior and typings for overlay.value, getMap and setMap.
In `@test/e2e/base.test.ts`:
- Line 23: The test currently hard-codes a hashed filename in the assertion
using expect(text).toMatchInlineSnapshot which is brittle; replace that
exact-snapshot assertion with a pattern-based assertion that matches the stable
path structure (e.g., assert that the variable text matches a regex or uses
expect.stringMatching) so the test checks for "/foo/_scripts/assets/" followed
by any asset name ending in ".js" rather than a specific hash; update the
assertion referencing the variable text and the call
expect(text).toMatchInlineSnapshot to use a regex/string-matching form instead.
🪄 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: e151ca5e-2394-4c7c-bc99-aca74fda595f
📒 Files selected for processing (36)
docs/content/docs/5.releases/1.v1.mddocs/content/scripts/google-maps.mddocs/content/scripts/google-maps/.navigation.ymldocs/content/scripts/google-maps/1.guides/.navigation.ymldocs/content/scripts/google-maps/1.guides/1.performance.mddocs/content/scripts/google-maps/1.guides/2.programmatic-api.mddocs/content/scripts/google-maps/1.guides/3.map-styling.mddocs/content/scripts/google-maps/1.guides/4.billing.mddocs/content/scripts/google-maps/2.api/.navigation.ymldocs/content/scripts/google-maps/2.api/1.script-google-maps.mddocs/content/scripts/google-maps/2.api/10.rectangle.mddocs/content/scripts/google-maps/2.api/11.heatmap-layer.mddocs/content/scripts/google-maps/2.api/12.overlay-view.mddocs/content/scripts/google-maps/2.api/13.use-script-google-maps.mddocs/content/scripts/google-maps/2.api/2.marker.mddocs/content/scripts/google-maps/2.api/3.advanced-marker-element.mddocs/content/scripts/google-maps/2.api/4.pin-element.mddocs/content/scripts/google-maps/2.api/5.info-window.mddocs/content/scripts/google-maps/2.api/6.marker-clusterer.mddocs/content/scripts/google-maps/2.api/7.circle.mddocs/content/scripts/google-maps/2.api/8.polygon.mddocs/content/scripts/google-maps/2.api/9.polyline.mddocs/content/scripts/google-maps/index.mdplayground/pages/third-parties/google-maps/sfcs.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMaps.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsCircle.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsInfoWindow.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsMarker.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsPolygon.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsPolyline.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsRectangle.vuesrc/runtime/components/GoogleMaps/bindGoogleMapsEvents.tssrc/runtime/registry/gravatar.tstest/e2e/base.test.ts
💤 Files with no reviewable changes (1)
- docs/content/scripts/google-maps.md
|
|
||
| This slot displays a placeholder image before Google Maps loads. By default, this will show the Google Maps Static API image for the map. | ||
|
|
||
| By providing your own placeholder slot, you disable the default placeholder image and won't incur charges for the Static Maps API. |
There was a problem hiding this comment.
Narrow the billing claim for custom placeholder slot usage.
The “won't incur charges” claim is too absolute. If users still render the provided placeholder URL, Static Maps requests may still occur. Please reword this to describe when charges are actually avoided.
Also applies to: 125-127
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/content/scripts/google-maps/2.api/1.script-google-maps.md` at line 120,
The sentence asserting that providing your own placeholder slot "won't incur
charges for the Static Maps API" is too absolute; change the wording around the
`placeholder` slot to clarify that charges are avoided only when the provided
placeholder URL is used in place of any Static Maps API requests (i.e., no
Static Maps requests are made or rendered), and note that if the placeholder URL
itself triggers a Static Maps request or the original static map is still
requested/rendered then normal Static Maps billing may apply; update the similar
phrasing in the adjacent lines (the other mention of the `placeholder` slot) to
match this conditional wording referencing the `placeholder` slot and the Static
Maps API.
docs/content/scripts/google-maps/2.api/14.use-script-google-maps.md
Outdated
Show resolved
Hide resolved
docs/content/scripts/google-maps/2.api/14.use-script-google-maps.md
Outdated
Show resolved
Hide resolved
harlan-zw
force-pushed
the
feat/google-maps-dx-overhaul
branch
from
d8f0c54 to
5406f9a
Compare
commit: |
OverlayView: - Marker anchoring: auto-inherits position when nested inside Marker/AdvancedMarkerElement - v-model:open for toggling visibility without remounting - Follows marker during drag via position_changed/drag event listeners - Fixed stale computed position bug (plain function instead of computed for Google Maps state) AdvancedMarkerElement: - #content slot replaces default pin with any Vue template - :position top-level prop (shorthand for options.position) Marker: - :position top-level prop - Dev deprecation warning (google.maps.Marker is deprecated by Google) Root ScriptGoogleMaps: - :zoom reactive prop (takes precedence over mapOptions.zoom) - resolveQueryToLatLng typo fix (was resolveQueryToLatLang) - Improved dev error message guiding users to registry config Shared: - bindGoogleMapsEvents utility extracts duplicated event setup across 7 components Docs: - Restructured guides: Performance, Programmatic API, Map Styling, Billing - All API docs use ::script-types directive for auto-generated props/events - Quick Start section in index.md - v1 release notes updated with Google Maps overhaul section
- Fix trigger event docs (mouseclick → mouseenter/mouseover/mousedown) - Fix heading levels (h3 → h2) for markdown hierarchy - Clarify awaitingLoad vs loading slot descriptions - Narrow billing claim for custom placeholder slot - Add visualization library note to HeatmapLayer docs - Fix "fine-grain" → "fine-grained" typo
harlan-zw
force-pushed
the
feat/google-maps-dx-overhaul
branch
from
f08ac89 to
32e0915
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (5)
docs/content/scripts/google-maps/index.md (1)
123-123:⚠️ Potential issue | 🟠 MajorRemove the hardcoded Google API key from the demo snippet.
This still exposes a real-looking key and conflicts with the warning on Line 63. Replace it with a placeholder (for example,
YOUR_API_KEY) or explicitly mark it as a restricted demo key and point to env-based setup.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/scripts/google-maps/index.md` at line 123, Replace the hardcoded Google Maps API key value in the demo snippet where the attribute api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU" appears: change it to a neutral placeholder such as api-key="YOUR_API_KEY" (or to api-key="[RESTRICTED_DEMO_KEY]" with an adjacent note) and update the surrounding text to instruct users to supply a real key via environment variables or a config file—ensure the snippet and its caption reference env-based setup rather than embedding any real-looking key.docs/content/scripts/google-maps/2.api/1.script-google-maps.md (4)
83-84:⚠️ Potential issue | 🟡 MinorClarify the distinct lifecycle phases for
awaitingLoadvsloadingslots.Both slot descriptions currently state "This slot displays content while Google Maps is loading," making their intended usage unclear. Please document the exact phase each slot represents (e.g.,
awaitingLoadbefore the script is requested or triggered,loadingwhile the script is in-flight but the map is not yet initialized).Also applies to: 99-100
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/scripts/google-maps/2.api/1.script-google-maps.md` around lines 83 - 84, Update the two slot descriptions for awaitingLoad and loading to clearly distinguish lifecycle phases: change the awaitingLoad slot description to state it is shown before the Google Maps script is requested or initialization is triggered (e.g., initial idle/waiting state), and change the loading slot description to state it is shown while the script is in-flight/being fetched and the map has not yet been initialized (in-progress network/loading state); apply the same clarification to the duplicate occurrences referenced (lines 99-100 equivalent) so both instances explicitly map awaitingLoad -> pre-request and loading -> in-flight initialization.
13-13:⚠️ Potential issue | 🟡 MinorCorrect heading level to satisfy markdown hierarchy.
The
### Key Propsheading should be## Key Propsto avoid MD001 violations (heading levels should only increment by one).📝 Proposed fix
-### Key Props +## Key Props🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/scripts/google-maps/2.api/1.script-google-maps.md` at line 13, Change the heading "### Key Props" to "## Key Props" so the markdown heading level increments correctly and satisfies MD001; locate the heading text "Key Props" in the document and replace the triple-hash prefix with a double-hash prefix.
120-120:⚠️ Potential issue | 🟡 MinorClarify the conditional nature of Static Maps billing when using custom placeholder.
Line 120 states providing a custom placeholder "won't incur charges for the Static Maps API," but this is only accurate if you completely replace the placeholder without using the provided
placeholderURL. If the slot still renders<img :src="placeholder">, Static Maps requests and charges still occur. Please reword to clarify that charges are avoided only when you provide an entirely custom image source.Also applies to: 125-127
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/scripts/google-maps/2.api/1.script-google-maps.md` at line 120, The sentence claiming "won't incur charges for the Static Maps API" is misleading because charges are avoided only when you fully replace the default placeholder with your own image source (i.e., you do not render the provided `placeholder` URL). Update the wording around the `placeholder` slot (and similarly at lines 125–127) to state that using a custom placeholder will avoid Static Maps requests and charges only if you supply and render a complete custom image source instead of using `<img :src="placeholder">` or the provided `placeholder` URL; explicitly call out that rendering the `placeholder` URL still triggers Static Maps requests and billing.
11-11:⚠️ Potential issue | 🟡 MinorFix conflicting default trigger documentation.
Line 11 states the default is
mouseoverandmouseclick, while Line 22 documents the default as['mouseenter', 'mouseover', 'mousedown']. Additionally,mouseclickis not a valid DOM event (should beclickormousedown). Please align both locations to match the actual runtime defaults.Also applies to: 22-22
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/scripts/google-maps/2.api/1.script-google-maps.md` at line 11, Update the conflicting default trigger docs so both places use the actual runtime default triggers: replace the phrase "mouseover and mouseclick" with the correct list "mouseenter, mouseover, and mousedown" (i.e., ['mouseenter', 'mouseover', 'mousedown']) and remove the invalid "mouseclick" term, ensuring the text matches the runtime default shown as "['mouseenter', 'mouseover', 'mousedown']".
🧹 Nitpick comments (1)
docs/content/scripts/google-maps/1.guides/1.performance.md (1)
38-38: Consider referencing external billing documentation instead of hardcoding pricing.The hardcoded "$7/1000" rate could become outdated as Google updates their pricing. Consider linking to the official Google Maps pricing page or the project's billing guide instead.
💡 Proposed alternative
-Immediate loading charges the Maps JavaScript API ($7/1000) on every page view. Only use this when the map is essential to the page experience. +Immediate loading incurs Maps JavaScript API charges on every page view. Only use this when the map is essential to the page experience. See [Billing & Permissions](/scripts/google-maps/guides/billing) for current pricing.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/scripts/google-maps/1.guides/1.performance.md` at line 38, Replace the hardcoded "$7/1000" rate in the sentence "Immediate loading charges the Maps JavaScript API ($7/1000) on every page view." with a reference to the official Google Maps pricing (or the project's billing guide) by linking to the Google Maps Platform pricing page and noting that rates may change; update the text to something like "Immediate loading may incur charges — see Google Maps Platform pricing for current rates" so the doc links to authoritative billing info rather than embedding a static price.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/content/scripts/google-maps/1.guides/1.performance.md`:
- Line 69: Update the text that claims replacing the Google Static Maps image
"eliminates Static Maps API charges" to clarify it only applies when you supply
a completely custom image source (not when rendering the Google Static Maps URL
via the component). Specifically, modify the sentence near the example and add a
short note explaining that providing the `#placeholder` slot without using the
placeholder prop avoids Static Maps API requests entirely, whereas rendering the
placeholder prop (the scoped `placeholder` URL shown in the example) still
triggers Static Maps charges; reference the `placeholder` prop and the
`#placeholder` slot in the change so readers can find the relevant example.
In `@docs/content/scripts/google-maps/1.guides/3.map-styling.md`:
- Line 83: Update the phrase "Custom styled maps" to use hyphenation by changing
it to "Custom-styled maps" wherever it appears (specifically the sentence
starting with "Custom styled maps pair well with custom marker content for a
cohesive look:"), ensuring the compound modifier is hyphenated for grammatical
consistency.
- Line 46: Update the sentence that currently reads "Cloud-based styling also
requires the map to use AdvancedMarkerElement (legacy Marker is not supported
with map IDs)" to correctly state that AdvancedMarkerElement requires a mapId;
rephrase to: cloud-based styling works with AdvancedMarkerElement (which
requires a mapId) while the legacy Marker does not require a mapId and remains
supported. Ensure the mutual-exclusion note about JSON styles vs mapId remains
(when both styles and mapId are provided, styles are applied and mapId is
ignored) and use the exact symbols mapId, styles, AdvancedMarkerElement, and
Marker in the revised text for clarity.
---
Duplicate comments:
In `@docs/content/scripts/google-maps/2.api/1.script-google-maps.md`:
- Around line 83-84: Update the two slot descriptions for awaitingLoad and
loading to clearly distinguish lifecycle phases: change the awaitingLoad slot
description to state it is shown before the Google Maps script is requested or
initialization is triggered (e.g., initial idle/waiting state), and change the
loading slot description to state it is shown while the script is
in-flight/being fetched and the map has not yet been initialized (in-progress
network/loading state); apply the same clarification to the duplicate
occurrences referenced (lines 99-100 equivalent) so both instances explicitly
map awaitingLoad -> pre-request and loading -> in-flight initialization.
- Line 13: Change the heading "### Key Props" to "## Key Props" so the markdown
heading level increments correctly and satisfies MD001; locate the heading text
"Key Props" in the document and replace the triple-hash prefix with a
double-hash prefix.
- Line 120: The sentence claiming "won't incur charges for the Static Maps API"
is misleading because charges are avoided only when you fully replace the
default placeholder with your own image source (i.e., you do not render the
provided `placeholder` URL). Update the wording around the `placeholder` slot
(and similarly at lines 125–127) to state that using a custom placeholder will
avoid Static Maps requests and charges only if you supply and render a complete
custom image source instead of using `<img :src="placeholder">` or the provided
`placeholder` URL; explicitly call out that rendering the `placeholder` URL
still triggers Static Maps requests and billing.
- Line 11: Update the conflicting default trigger docs so both places use the
actual runtime default triggers: replace the phrase "mouseover and mouseclick"
with the correct list "mouseenter, mouseover, and mousedown" (i.e.,
['mouseenter', 'mouseover', 'mousedown']) and remove the invalid "mouseclick"
term, ensuring the text matches the runtime default shown as "['mouseenter',
'mouseover', 'mousedown']".
In `@docs/content/scripts/google-maps/index.md`:
- Line 123: Replace the hardcoded Google Maps API key value in the demo snippet
where the attribute api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU" appears:
change it to a neutral placeholder such as api-key="YOUR_API_KEY" (or to
api-key="[RESTRICTED_DEMO_KEY]" with an adjacent note) and update the
surrounding text to instruct users to supply a real key via environment
variables or a config file—ensure the snippet and its caption reference
env-based setup rather than embedding any real-looking key.
---
Nitpick comments:
In `@docs/content/scripts/google-maps/1.guides/1.performance.md`:
- Line 38: Replace the hardcoded "$7/1000" rate in the sentence "Immediate
loading charges the Maps JavaScript API ($7/1000) on every page view." with a
reference to the official Google Maps pricing (or the project's billing guide)
by linking to the Google Maps Platform pricing page and noting that rates may
change; update the text to something like "Immediate loading may incur charges —
see Google Maps Platform pricing for current rates" so the doc links to
authoritative billing info rather than embedding a static price.
🪄 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: 8a562460-e290-4e3c-a5ba-4c30bc3984ad
📒 Files selected for processing (38)
docs/content/docs/5.releases/1.v1.mddocs/content/scripts/google-maps.mddocs/content/scripts/google-maps/.navigation.ymldocs/content/scripts/google-maps/1.guides/.navigation.ymldocs/content/scripts/google-maps/1.guides/1.performance.mddocs/content/scripts/google-maps/1.guides/2.programmatic-api.mddocs/content/scripts/google-maps/1.guides/3.map-styling.mddocs/content/scripts/google-maps/1.guides/4.billing.mddocs/content/scripts/google-maps/2.api/.navigation.ymldocs/content/scripts/google-maps/2.api/1.script-google-maps.mddocs/content/scripts/google-maps/2.api/10.rectangle.mddocs/content/scripts/google-maps/2.api/11.geojson.mddocs/content/scripts/google-maps/2.api/12.heatmap-layer.mddocs/content/scripts/google-maps/2.api/13.overlay-view.mddocs/content/scripts/google-maps/2.api/14.use-script-google-maps.mddocs/content/scripts/google-maps/2.api/2.marker.mddocs/content/scripts/google-maps/2.api/3.advanced-marker-element.mddocs/content/scripts/google-maps/2.api/4.pin-element.mddocs/content/scripts/google-maps/2.api/5.info-window.mddocs/content/scripts/google-maps/2.api/6.marker-clusterer.mddocs/content/scripts/google-maps/2.api/7.circle.mddocs/content/scripts/google-maps/2.api/8.polygon.mddocs/content/scripts/google-maps/2.api/9.polyline.mddocs/content/scripts/google-maps/index.mdplayground/pages/third-parties/google-maps/sfcs.vuescripts/generate-registry-types.tssrc/registry-types.jsonsrc/runtime/components/GoogleMaps/ScriptGoogleMaps.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsCircle.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsInfoWindow.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsMarker.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsPolygon.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsPolyline.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsRectangle.vuesrc/runtime/components/GoogleMaps/bindGoogleMapsEvents.tssrc/runtime/registry/gravatar.ts
💤 Files with no reviewable changes (1)
- docs/content/scripts/google-maps.md
✅ Files skipped from review due to trivial changes (19)
- docs/content/scripts/google-maps/2.api/.navigation.yml
- docs/content/scripts/google-maps/.navigation.yml
- docs/content/scripts/google-maps/1.guides/.navigation.yml
- docs/content/scripts/google-maps/2.api/11.geojson.md
- docs/content/scripts/google-maps/2.api/7.circle.md
- docs/content/scripts/google-maps/2.api/4.pin-element.md
- docs/content/scripts/google-maps/2.api/14.use-script-google-maps.md
- docs/content/scripts/google-maps/2.api/9.polyline.md
- docs/content/scripts/google-maps/2.api/2.marker.md
- docs/content/scripts/google-maps/2.api/5.info-window.md
- docs/content/scripts/google-maps/2.api/8.polygon.md
- docs/content/scripts/google-maps/2.api/10.rectangle.md
- docs/content/scripts/google-maps/2.api/12.heatmap-layer.md
- docs/content/scripts/google-maps/2.api/6.marker-clusterer.md
- docs/content/scripts/google-maps/1.guides/2.programmatic-api.md
- docs/content/scripts/google-maps/2.api/13.overlay-view.md
- src/runtime/components/GoogleMaps/bindGoogleMapsEvents.ts
- docs/content/scripts/google-maps/1.guides/4.billing.md
- docs/content/scripts/google-maps/2.api/3.advanced-marker-element.md
🚧 Files skipped from review as they are similar to previous changes (12)
- src/runtime/registry/gravatar.ts
- src/runtime/components/GoogleMaps/ScriptGoogleMapsInfoWindow.vue
- src/runtime/components/GoogleMaps/ScriptGoogleMapsCircle.vue
- src/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vue
- src/runtime/components/GoogleMaps/ScriptGoogleMapsMarker.vue
- src/runtime/components/GoogleMaps/ScriptGoogleMapsRectangle.vue
- src/runtime/components/GoogleMaps/ScriptGoogleMapsPolyline.vue
- playground/pages/third-parties/google-maps/sfcs.vue
- docs/content/docs/5.releases/1.v1.md
- src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
- src/runtime/components/GoogleMaps/ScriptGoogleMapsPolygon.vue
- src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
playground/pages/third-parties/google-maps/sfcs.vue (1)
98-105:⚠️ Potential issue | 🟠 MajorDon't commit a real Maps API key in the playground.
Line 100 ships a live-looking credential from a checked-in source file. Pull it from runtime config or an env-backed local override instead.
🔐 Suggested change
- api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU" + :api-key="config.public.scripts.googleMaps.apiKey"Add in
<script setup>:const config = useRuntimeConfig()🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@playground/pages/third-parties/google-maps/sfcs.vue` around lines 98 - 105, Replace the hardcoded Maps API key passed to the ScriptGoogleMaps component (prop "api-key") with a runtime-config value: add const config = useRuntimeConfig() in the <script setup> and pass the key as a bound prop (e.g., :api-key="config.googleMapsApiKey" or similar), ensuring local dev can override via env-backed runtime config and removing the literal API key from the template; update any references to googleMapsRef or ScriptGoogleMaps props accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/content/scripts/google-maps/2.api/1.script-google-maps.md`:
- Line 120: Rewrite the sentence at the flagged line so it avoids a
false-dichotomy phrasing; replace the current line with a direct statement like:
"If you provide a custom placeholder slot with your own content instead of using
the provided placeholder URL, the default Static Maps image will not be rendered
and no Static Maps API charges will be incurred." Ensure this updated sentence
appears in docs/content/scripts/google-maps/2.api/1.script-google-maps.md
replacing the original single-line wording.
In `@docs/content/scripts/google-maps/index.md`:
- Around line 183-191: The snippets starting with
ScriptGoogleMapsAdvancedMarkerElement lack the required map context; wrap each
Quick Start example in a parent ScriptGoogleMaps component (providing center and
zoom props) so ScriptGoogleMapsAdvancedMarkerElement and other child components
render correctly; update the code fences that begin with
ScriptGoogleMapsAdvancedMarkerElement (and the similar block around lines
197-220) to place the marker/overlay example inside a ScriptGoogleMaps wrapper
component using center and zoom.
- Around line 9-12: Update the front-matter entry for the component with label
"<ScriptGoogleMaps>" by changing its "to" URL from the old path to the correct
GitHub URL
(https://github.com/nuxt/scripts/blob/main/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue);
locate the front-matter block in docs/content/scripts/google-maps/index.md and
replace the "to" value so it points to the GoogleMaps/ScriptGoogleMaps.vue file.
In `@src/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vue`:
- Around line 93-103: The watchers must apply the same precedence used in
create(): props.position overrides options.position; update the position watcher
and options watcher to compute a merged position (e.g., const mergedPos =
props.position ?? options?.position) and assign
advancedMarkerElement.value.position = mergedPos (or undefined) so clearing
:position falls back to options.position, and ensure the options watcher does
not reapply options.position when props.position is defined; reference the
existing advancedMarkerElement, props.position, props.options, and the create()
merge behavior when making the change.
In `@src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue`:
- Around line 95-105: The overlay's draw() currently returns early when
getResolvedPosition(), this.getProjection(), or
projection.fromLatLngToDivPixel(...) are falsy without hiding the DOM node,
leaving a stale visible overlay; update draw() to hide the overlay element (the
overlay DOM node used to render, e.g. this.div or this.element) before each
early return and to explicitly show it when a valid pos is computed, using the
same element referenced by draw() so that getResolvedPosition(),
this.getProjection(), projection.fromLatLngToDivPixel, and pos paths all
consistently toggle visibility.
- Around line 133-139: The overlay misses programmatic position updates because
only 'drag' and 'dragend' on
advancedMarkerElementContext.advancedMarkerElement.value (ame) are listened for;
add a watcher on the advanced marker's position (the reactive position used by
ScriptGoogleMapsAdvancedMarkerElement / ame.position or ame.getPosition()
equivalent) and call ov.draw() whenever that position changes so programmatic
updates invoke ov.draw() as well; locate the listeners block that pushes
ame.addListener('drag'...) and augment it with a reactive watch or
subscribe-to-position-change for ame that triggers ov.draw() and ensure the
watcher is cleaned up along with the existing listeners.
---
Outside diff comments:
In `@playground/pages/third-parties/google-maps/sfcs.vue`:
- Around line 98-105: Replace the hardcoded Maps API key passed to the
ScriptGoogleMaps component (prop "api-key") with a runtime-config value: add
const config = useRuntimeConfig() in the <script setup> and pass the key as a
bound prop (e.g., :api-key="config.googleMapsApiKey" or similar), ensuring local
dev can override via env-backed runtime config and removing the literal API key
from the template; update any references to googleMapsRef or ScriptGoogleMaps
props accordingly.
🪄 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: 8f2b5a66-29d4-4ae7-abaa-96bf4d403408
📒 Files selected for processing (35)
docs/content/scripts/google-maps/.navigation.ymldocs/content/scripts/google-maps/1.guides/.navigation.ymldocs/content/scripts/google-maps/1.guides/1.performance.mddocs/content/scripts/google-maps/1.guides/2.programmatic-api.mddocs/content/scripts/google-maps/1.guides/3.map-styling.mddocs/content/scripts/google-maps/1.guides/4.billing.mddocs/content/scripts/google-maps/2.api/.navigation.ymldocs/content/scripts/google-maps/2.api/1.script-google-maps.mddocs/content/scripts/google-maps/2.api/10.rectangle.mddocs/content/scripts/google-maps/2.api/11.geojson.mddocs/content/scripts/google-maps/2.api/12.heatmap-layer.mddocs/content/scripts/google-maps/2.api/13.overlay-view.mddocs/content/scripts/google-maps/2.api/14.use-script-google-maps.mddocs/content/scripts/google-maps/2.api/2.marker.mddocs/content/scripts/google-maps/2.api/3.advanced-marker-element.mddocs/content/scripts/google-maps/2.api/4.pin-element.mddocs/content/scripts/google-maps/2.api/5.info-window.mddocs/content/scripts/google-maps/2.api/6.marker-clusterer.mddocs/content/scripts/google-maps/2.api/7.circle.mddocs/content/scripts/google-maps/2.api/8.polygon.mddocs/content/scripts/google-maps/2.api/9.polyline.mddocs/content/scripts/google-maps/index.mdplayground/pages/third-parties/google-maps/sfcs.vuescripts/generate-registry-types.tssrc/registry-types.jsonsrc/runtime/components/GoogleMaps/ScriptGoogleMaps.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsCircle.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsInfoWindow.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsMarker.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsPolygon.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsPolyline.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsRectangle.vuesrc/runtime/components/GoogleMaps/bindGoogleMapsEvents.ts
✅ Files skipped from review due to trivial changes (19)
- docs/content/scripts/google-maps/1.guides/.navigation.yml
- docs/content/scripts/google-maps/.navigation.yml
- docs/content/scripts/google-maps/2.api/7.circle.md
- docs/content/scripts/google-maps/2.api/5.info-window.md
- docs/content/scripts/google-maps/2.api/.navigation.yml
- docs/content/scripts/google-maps/2.api/10.rectangle.md
- docs/content/scripts/google-maps/2.api/6.marker-clusterer.md
- docs/content/scripts/google-maps/2.api/4.pin-element.md
- docs/content/scripts/google-maps/2.api/2.marker.md
- docs/content/scripts/google-maps/2.api/9.polyline.md
- docs/content/scripts/google-maps/2.api/8.polygon.md
- docs/content/scripts/google-maps/2.api/13.overlay-view.md
- src/runtime/components/GoogleMaps/bindGoogleMapsEvents.ts
- docs/content/scripts/google-maps/1.guides/2.programmatic-api.md
- docs/content/scripts/google-maps/2.api/3.advanced-marker-element.md
- docs/content/scripts/google-maps/1.guides/4.billing.md
- docs/content/scripts/google-maps/2.api/11.geojson.md
- docs/content/scripts/google-maps/2.api/14.use-script-google-maps.md
- src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
🚧 Files skipped from review as they are similar to previous changes (8)
- src/runtime/components/GoogleMaps/ScriptGoogleMapsCircle.vue
- src/runtime/components/GoogleMaps/ScriptGoogleMapsPolyline.vue
- src/runtime/components/GoogleMaps/ScriptGoogleMapsRectangle.vue
- src/runtime/components/GoogleMaps/ScriptGoogleMapsPolygon.vue
- scripts/generate-registry-types.ts
- docs/content/scripts/google-maps/2.api/12.heatmap-layer.md
- src/runtime/components/GoogleMaps/ScriptGoogleMapsInfoWindow.vue
- src/runtime/components/GoogleMaps/ScriptGoogleMapsMarker.vue
src/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vue
Outdated
Show resolved
Hide resolved
Comment on lines
+95
to
+105
| const position = getResolvedPosition() | ||
| if (!position) | ||
| return | ||
| const projection = this.getProjection() | ||
| if (!projection) | ||
| return | ||
| const pos = projection.fromLatLngToDivPixel( | ||
| new mapsApi.LatLng(position.lat, position.lng), | ||
| ) | ||
| if (!pos) | ||
| return |
There was a problem hiding this comment.
Hide the element on early-return paths in draw().
After the overlay has been positioned once, Line 96, Line 99, or Line 104 can return without touching visibility. If the resolved position disappears later, the old overlay remains visible at the last pixel.
🪟 Suggested fix
const position = getResolvedPosition()
- if (!position)
- return
+ if (!position) {
+ el.style.visibility = 'hidden'
+ return
+ }
const projection = this.getProjection()
- if (!projection)
- return
+ if (!projection) {
+ el.style.visibility = 'hidden'
+ return
+ }
const pos = projection.fromLatLngToDivPixel(
new mapsApi.LatLng(position.lat, position.lng),
)
- if (!pos)
- return
+ if (!pos) {
+ el.style.visibility = 'hidden'
+ return
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const position = getResolvedPosition() | |
| if (!position) | |
| return | |
| const projection = this.getProjection() | |
| if (!projection) | |
| return | |
| const pos = projection.fromLatLngToDivPixel( | |
| new mapsApi.LatLng(position.lat, position.lng), | |
| ) | |
| if (!pos) | |
| return | |
| const position = getResolvedPosition() | |
| if (!position) { | |
| el.style.visibility = 'hidden' | |
| return | |
| } | |
| const projection = this.getProjection() | |
| if (!projection) { | |
| el.style.visibility = 'hidden' | |
| return | |
| } | |
| const pos = projection.fromLatLngToDivPixel( | |
| new mapsApi.LatLng(position.lat, position.lng), | |
| ) | |
| if (!pos) { | |
| el.style.visibility = 'hidden' | |
| return | |
| } |
🤖 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 95 - 105, The overlay's draw() currently returns early when
getResolvedPosition(), this.getProjection(), or
projection.fromLatLngToDivPixel(...) are falsy without hiding the DOM node,
leaving a stale visible overlay; update draw() to hide the overlay element (the
overlay DOM node used to render, e.g. this.div or this.element) before each
early return and to explicitly show it when a valid pos is computed, using the
same element referenced by draw() so that getResolvedPosition(),
this.getProjection(), projection.fromLatLngToDivPixel, and pos paths all
consistently toggle visibility.
- Remove unused ExtractedProps interface - Rewrite docs to avoid AI writing pattern lint warning - Fix ScriptGoogleMaps source link path in frontmatter - Replace hardcoded API key with placeholder in demo - Wrap Quick Start snippets in ScriptGoogleMaps parent - Clarify Static Maps billing claims in docs - Correct map ID / AdvancedMarkerElement directional requirement - Fix "Custom styled" → "Custom-styled" hyphenation - Add HeatmapLayer deprecation notice and frontmatter - Remove unsupported legacy Marker events from AdvancedMarkerElement - Clean up useScriptGoogleMaps docs type cast - Merge position/options watchers for consistent precedence - Hide overlay on early-return paths in draw() - Watch advanced marker position for programmatic overlay redraws
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/content/scripts/google-maps/1.guides/1.performance.md`:
- Around line 37-39: In the callout starting with ::callout{color="amber"} that
currently reads "Immediate loading charges the Maps JavaScript API ($7/1000) on
every page view.", remove the hardcoded price and rephrase to something like
"Immediate loading incurs Maps JavaScript API charges" and add a link to
Google's live pricing page (e.g., "see Google’s pricing page" as the linked
text); update the callout text so it no longer contains the fixed `($7/1000)`
value but instead points readers to the official pricing URL.
🪄 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: 72a2ae65-ddd8-4c0a-82f7-f013da4c32d2
📒 Files selected for processing (10)
docs/content/scripts/google-maps/1.guides/1.performance.mddocs/content/scripts/google-maps/1.guides/3.map-styling.mddocs/content/scripts/google-maps/2.api/1.script-google-maps.mddocs/content/scripts/google-maps/2.api/12.heatmap-layer.mddocs/content/scripts/google-maps/2.api/14.use-script-google-maps.mddocs/content/scripts/google-maps/index.mdscripts/generate-registry-types.tssrc/registry-types.jsonsrc/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vuesrc/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
✅ Files skipped from review due to trivial changes (5)
- docs/content/scripts/google-maps/2.api/12.heatmap-layer.md
- docs/content/scripts/google-maps/2.api/14.use-script-google-maps.md
- docs/content/scripts/google-maps/index.md
- docs/content/scripts/google-maps/1.guides/3.map-styling.md
- docs/content/scripts/google-maps/2.api/1.script-google-maps.md
🚧 Files skipped from review as they are similar to previous changes (3)
- scripts/generate-registry-types.ts
- src/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vue
- src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
Comment on lines
+37
to
+39
| ::callout{color="amber"} | ||
| Immediate loading charges the Maps JavaScript API ($7/1000) on every page view. Only use this when the map is essential to the page experience. | ||
| :: |
There was a problem hiding this comment.
Avoid hardcoded pricing in docs copy.
The fixed value ($7/1000) can go stale and mislead users. Prefer wording like “incurs Maps JavaScript API charges” plus a link to Google’s live pricing page.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/content/scripts/google-maps/1.guides/1.performance.md` around lines 37 -
39, In the callout starting with ::callout{color="amber"} that currently reads
"Immediate loading charges the Maps JavaScript API ($7/1000) on every page
view.", remove the hardcoded price and rephrase to something like "Immediate
loading incurs Maps JavaScript API charges" and add a link to Google's live
pricing page (e.g., "see Google’s pricing page" as the linked text); update the
callout text so it no longer contains the fixed `($7/1000)` value but instead
points readers to the official pricing URL.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔗 Linked issue
Resolves #657
Related to #658
❓ Type of change
📚 Description
Comprehensive DX overhaul of the Google Maps integration for v1. Adds new component features, fixes bugs, extracts shared utilities, and restructures documentation.
New Features
v-model:open: Toggle visibility without remounting the overlay. Preserves internal state.#contentslot: Replace the default pin with any Vue template (price tags, custom icons, etc.):positionprop on marker components: Shorthand for the most common option, no options bag needed.:zoomprop on ScriptGoogleMaps: Reactive zoom level as a top-level prop.bindGoogleMapsEventsutility: Shared across 7 components, replaces duplicated event setup functions.Bug Fixes
drag/dragendevents instead of potentially missingposition_changedDocs Overhaul
::script-typesdirective for auto-generated props/events (no manual tables)resolveQueryToLatLangrenamed toresolveQueryToLatLng(typo fix)ScriptGoogleMapsMarkeremits a dev deprecation warning (Google deprecatedgoogle.maps.Marker)📝 Migration
resolveQueryToLatLangwithresolveQueryToLatLngin any programmatic API usageScriptGoogleMapsMarkertoScriptGoogleMapsAdvancedMarkerElement