Docs: @next/third-parties/google GoogleMapsEmbed width & height props cant take percentages like the example shows

What is the improvement or update you wish to see?

I would like the documentation for GoogleMapsEmbed to show that the width and height props add "px" to the end of the strings passed to the component.

Is there any context that might help us understand?

Under Third Party Libraries, then under the Google Maps Embed section of the documentation, the example given is the following

import { GoogleMapsEmbed } from '@next/third-parties/google'
 
export default function Page() {
  return (
    <GoogleMapsEmbed
      apiKey="XYZ"
      height={200}
      width="100%"
      mode="place"
      q="Brooklyn+Bridge,New+York,NY"
    />
  )
}

As you can see, width is passed a value of "100%". However, this leads to a style of "100%px" on the div element. This is because the component under the hood adds "px" to the end of the height and width strings. The documentation does not reflect this.

Here is a link to the code where this happens.

'use client'

import React, { useEffect } from 'react'

export type ScriptEmbed = {
  html?: string | null
  height?: string | number | null
  width?: string | number | null
  children?: React.ReactElement | React.ReactElement[]
  dataNtpc?: string
}

export default function ThirdPartyScriptEmbed({
  html,
  height = null,
  width = null,
  children,
  dataNtpc = '',
}: ScriptEmbed) {
  useEffect(() => {
    if (dataNtpc) {
      // performance.mark is being used as a feature use signal. While it is traditionally used for performance
      // benchmarking it is low overhead and thus considered safe to use in production and it is a widely available
      // existing API.
      performance.mark('mark_feature_usage', {
        detail: {
          feature: `next-third-parties-${dataNtpc}`,
        },
      })
    }
  }, [dataNtpc])

  return (
    <>
      {/* insert script children */}
      {children}
      {/* insert html */}
      {html ? (
        <div
          style={{
            height: height != null ? `${height}px` : 'auto',
            width: width != null ? `${width}px` : 'auto',
          }}
          data-ntpc={dataNtpc}
          dangerouslySetInnerHTML={{ __html: html }}
        />
      ) : null}
    </>
  )
}

My request is to either reflect this in the documentation OR to update the component to remove the added "px" to allow for percentages. I would request the latter.

Thank you!

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#google-maps-embed

Start with the Google Maps Embed section in the linked documentation and the referenced packages/third-parties/src/ThirdPartyScriptEmbed.tsx lines 41-42. Determine whether the intended fix is to clarify the documented pixel-only behavior or change the component to support percentage values. Done means the example and component behavior no longer contradict each other.