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

[FluxxField]

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

[simonriple]

I've got the same issue. I would also prefer adding support for percentages like you suggested. I'm using a workaround where adding a semicolon ; after the percentage % allows for width and height percentages by terminating the style property before the "px" string is added.

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"
    />
  )
}

[lottmarcos]

I've got the same issues too! It only receives height and width parameters values as px

[FluxxField]

I've got the same issues too! It only receives height and width parameters values as px

As of right now, the comment above yours is the best solution. Hope that helps for now till this is eventually addressed.

[jhssilva]

Additional Note: Unfortunately, the Google Maps Embed does not allow us to set a title attribute on the