feat(google-maps): declarative SFC API

[harlan-zw]

🔗 Linked issue

Continuation of #306

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR introduces 10 new Vue SFC components for Google Maps, enabling declarative map composition using Vue's template syntax.

• ScriptGoogleMapsMarker - Classic markers with icon support
• ScriptGoogleMapsAdvancedMarkerElement - Modern advanced markers with HTML content
• ScriptGoogleMapsPinElement - Customizable pin markers
• ScriptGoogleMapsInfoWindow - Information windows
• ScriptGoogleMapsMarkerClusterer - Marker clustering
• ScriptGoogleMapsCircle/Polygon/Polyline/Rectangle - Shape overlays
• ScriptGoogleMapsHeatmapLayer - Heatmap visualization

<template>
<ScriptGoogleMaps
:center="{ lat: -34.397, lng: 150.644 }"
:zoom="8"
api-key="your-api-key"
>
<!-- Add markers -->
<ScriptGoogleMapsMarker
:options="{ position: { lat: -34.397, lng: 150.644 } }"
>
<!-- Info window appears on marker click -->
<ScriptGoogleMapsInfoWindow>
<div>
<h3>Sydney, Australia</h3>
<p>A great city!</p>
</div>
</ScriptGoogleMapsInfoWindow>
</ScriptGoogleMapsMarker>
<!-- Advanced marker with custom pin -->
<ScriptGoogleMapsAdvancedMarkerElement
:options="{ position: { lat: -34.407, lng: 150.654 } }"
>
<ScriptGoogleMapsPinElement
:options="{ scale: 1.5, background: '#FF0000' }"
/>
</ScriptGoogleMapsAdvancedMarkerElement>
<!-- Circle overlay -->
<ScriptGoogleMapsCircle
:options="{ center: { lat: -34.397, lng: 150.644 }, radius: 1000, fillColor: '#FF0000', fillOpacity: 0.35 }"
/>
</ScriptGoogleMaps>
</template>

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
scripts-docs	Error			Sep 22, 2025 9:23am
scripts-playground	Ready	Preview	Comment	Sep 22, 2025 9:23am

[pkg-pr-new]

Open in StackBlitz

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

commit: 6d2b6cc