docs: add remaining third-party-capital api docs (#25592)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Houssein Djirdeh <houssein.djirdeh@gmail.com>
Co-authored-by: Julien Huang <julien.h.dev@gmail.com>
Co-authored-by: Damian Głowala <damian.glowala.rebkow@gmail.com>

docs/3.api/1.components/12.google-maps.md

@@ -0,0 +1,64 @@
+---
+title: "<GoogleMaps>"
+description: A simple and performant Google Maps component.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/scripts-and-assets/blob/main/modules/nuxt-third-party-capital/src/runtime/components/GoogleMaps.ts
+    size: xs
+---
+
+The `<GoogleMaps>` component uses the [Maps JavaScript API](https://developers.google.com/maps/documentation/javascript) to load a map to your page.
+
+::callout
+You need an API key to use Google Maps.
+::
+
+## Example with Query
+
+```vue
+<template>
+  <div>
+    <GoogleMaps
+      api-key="API_KEY"
+      width="600"
+      height="400"
+      q="Space+Needle,Seattle+WA"
+    />
+  </div>
+</template>
+```
+
+## Example with Coordinates
+
+```vue
+<template>
+  <div>
+    <GoogleMaps
+      api-key="API_KEY"
+      width="600"
+      height="400"
+      :center="{ lat: 47.62065090386302, lng: -122.34932031714334 }"
+    />
+  </div>
+</template>
+```
+
+## Props
+
+- `apiKey`: The [API key](https://developers.google.com/maps/documentation/javascript/get-api-key) to use Google Maps API.
+  - **type**: `string`
+  - **required**
+- `q`: A query to search for.
+  - **type**: `string`
+- `center`: Coordinates to set the map to
+  - **type**: `LatLng`
+- `zoom`: Zoom value for the map
+  - **type**: `number`
+- `width`: Width of the player
+  - **type**: `string`
+- `height`: Height of the player
+  - **type**: `string`
+- `params`: [Parameters](https://developers.google.com/maps/documentation/javascript/load-maps-js-api#optional_parameters) for the map.
+
+Either a query (q) or coordinates (center) are needed for the map to function properly.

docs/3.api/1.components/13.youtube-embed.md

@@ -0,0 +1,39 @@
+---
+title: "<YoutubeEmbed>"
+description: A simple and performant YouTube component.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/scripts-and-assets/blob/main/modules/nuxt-third-party-capital/src/runtime/components/YoutubeEmbed.ts
+    size: xs
+---
+
+The `<YoutubeEmbed>` component can be used to display a YouTube embed.
+It uses [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) to load significantly faster.
+
+## Minimal Example
+
+```vue
+<template>
+  <div>
+    <YoutubeEmbed
+      video-id="d_IFKP1Ofq0"
+      play-label="Play"
+    />
+  </div>
+</template>
+```
+
+## Props
+
+- `videoId`: The ID of the video
+  - **type**: `string`
+  - **required**
+- `playLabel`: The label of the play button. This is for a11y purposes.
+  - **type**: `string`
+  - **required**
+- `width`: Width of the player
+  - **type**: `string`
+- `height`: Height of the player
+  - **type**: `string`
+- `params`: [Parameters](https://developers.google.com/youtube/player_parameters#Parameters) for the player.

docs/3.api/2.composables/use-google-analytics.md

@@ -14,31 +14,7 @@ The `useGoogleAnalytics` composable function allows you to include [Google Analy
 If Google Tag Manager is already included in your application, you can configure Google Analytics directly using it, rather than including Google Analytics as a separate component. Refer to the [documentation](https://developers.google.com/analytics/devguides/collection/ga4/tag-options#what-is-gtm) to learn more about the differences between Tag Manager and gtag.js.
 ::
 
-## Type
+## Minimal Example
-
-```ts
-useGoogleAnalytics(options: ThirdPartyScriptOptions<GoogleAnalyticsOptions, GoogleAnalyticsApi>): ThirdPartyScriptApi<GoogleAnalyticsApi>
-```
-
-## Params
-
-An object containing the following options:
-
-| name | type   | description                     |
-|:-----|:-------|:--------------------------------|
-| id   | string | Google Analytics [measurement ID](https://support.google.com/analytics/answer/12270356). (required) |
-
-## Return values
-
-An object that contains a special `$script` property that gives you access to the underlying script instance.
-
-- `$script.waitForLoad`: A promise that resolves when the script is ready to use. It exposes `gtag` and `dataLayer`, which lets you interact with the API.
-
-::callout
-Learn more about [useScript](https://unhead.unjs.io/usage/composables/use-script).
-::
-
-## Minimal example
 
 ```vue
 <script setup>
@@ -59,3 +35,27 @@ $script.waitForLoad().then(({ gtag }) => {
 })
 </script>
 ```
+
+## Type
+
+```ts
+useGoogleAnalytics(options: ThirdPartyScriptOptions<GoogleAnalyticsOptions, GoogleAnalyticsApi>): ThirdPartyScriptApi<GoogleAnalyticsApi>
+```
+
+## Params
+
+An object containing the following options:
+
+- `id`: Google Analytics [measurement ID](https://support.google.com/analytics/answer/12270356).
+  - **type**: `string`
+  - **required**
+
+## Return Values
+
+An object that contains a special `$script` property that gives you access to the underlying script instance.
+
+- `$script.waitForLoad`: A promise that resolves when the script is ready to use. It exposes `gtag` and `dataLayer`, which lets you interact with the API.
+
+::callout
+Learn more about [`useScript`](https://unhead.unjs.io/usage/composables/use-script).
+::

docs/3.api/2.composables/use-google-tag-manager.md

@@ -0,0 +1,60 @@
+---
+title: useGoogleTagManager
+description: useGoogleTagManager allows you to install Google Tag Manager in your Nuxt app.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/scripts-and-assets/blob/main/modules/nuxt-third-party-capital/src/runtime/composables/googleTagManager.ts
+    size: xs
+---
+
+The `useGoogleTagManager` composable allows you to install [Google Tag Manager](https://developers.google.com/tag-platform/tag-manager/web) in your Nuxt application.
+
+## Minimal Example
+
+```vue
+<script setup>
+useGoogleTagManager({ id: 'GTM-123456' })
+</script>
+```
+
+## Example with Custom Event
+
+```vue
+<script setup>
+const { $script } = useGoogleTagManager({
+  id: 'GTM-123456'
+})
+
+$script.waitForLoad().then(({ dataLayer }) => {
+  dataLayer.push({
+    event: 'pageview',
+    page_path: '/google-tag-manager'
+  })
+})
+</script>
+```
+
+## Type
+
+```ts
+useGoogleTagManager(options: ThirdPartyScriptOptions<GoogleTagManagerOptions, GoogleTagManagerApi>): ThirdPartyScriptApi<GoogleTagManagerApi>
+```
+
+## Params
+
+An object containing the following options:
+
+- `id`: Your GTM container ID. Usually starts with 'GTM-'.
+  - **type**: `string`
+  - **required**
+
+## Return Values
+
+An object that contains a special `$script` property that gives you access to the underlying script instance.
+
+- `$script.waitForLoad`: A promise that resolves when the script is ready to use. It exposes `google_tag_manager` and `dataLayer`, which lets you interact with the API.
+
+::callout
+Learn more about [`useScript`](https://unhead.unjs.io/usage/composables/use-script).
+::