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