davidasix/google place id lookups

[DavidASix]

Google made this so much harder than it needs to be.

This is essentially an implementation of Google's custom component gpm-place-autocomplete, and a lot of the docs can be found here:

https://developers.google.com/maps/documentation/javascript/place-autocomplete-new#example-maps

Unfortunately it renders all its content as closed shadow DOM which cannot be relied upon for functionality.

[Copilot]

Pull Request Overview

This PR implements a client-side Google Places autocomplete input using the new gmp-place-autocomplete custom element to capture and display a Place ID on the Google Reviews page.

• Adds a GooglePlaceInput component that loads the Maps JS API and handles selection/clearing events.
• Integrates GooglePlaceInput into GoogleReviewPage, storing and displaying the selected placeId.
• Updates package.json to include @types/google.maps for TypeScript support.

Reviewed Changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.

File	Description
src/app/(product)/google-reviews/page.tsx	Integrates GooglePlaceInput and renders selected Place ID UI.
src/app/(product)/google-reviews/_components/google-place-input.tsx	Introduces the autocomplete component with script loading and event wiring.
package.json	Adds @types/google.maps to devDependencies.

Comments suppressed due to low confidence (2)

src/app/(product)/google-reviews/_components/google-place-input.tsx:35

• This new component lacks accompanying unit or integration tests. Consider adding tests for initializing the script, handling gmp-select events, and clearing selection to ensure reliable behavior.

export default function GooglePlaceInput({

src/app/(product)/google-reviews/_components/google-place-input.tsx:129

• [nitpick] The loading=async query parameter is unnecessary since Next.js Script with strategy="afterInteractive" handles script loading behavior. It can be removed for clarity.

        src={`https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=places&loading=async`}

[Copilot]

The setTimeout callback isn’t cleared on unmount, which could lead to state updates after the component is gone. Capture the timer ID and clear it in the effect’s cleanup.

Suggested change

	setTimeout(() => {
	const timerId = setTimeout(() => {

[Copilot]

The placeholder prop passed into GooglePlaceInput isn’t forwarded to the underlying gmp-place-autocomplete element. Add placeholder to the props object so consumers can customize it.