feat: Migrate and modernize React Place Autocomplete sample

[willum070]

Description

This PR overhauls the rgm-autocomplete sample to use the modern Google Maps Places API and the new <gmp-place-autocomplete> Web Component. It serves as a definitive guide for developers on how to correctly integrate the new Places API and Web Components within a React (@vis.gl/react-google-maps) environment while maintaining strict type safety.

Key Changes

• Modern Web Component Integration: Replaced the legacy Autocomplete widget with the modern PlaceAutocompleteElement via useMapsLibrary('places').
• Programmatic Instantiation: Instantiated the Web Component programmatically via a React ref to reliably capture custom gmp-select events, avoiding React's synthetic event system quirks with Custom Elements.
• New Place Class Usage: Demonstrated the core design principle of the new API by capturing the PlacePredictionSelectEvent, calling placePrediction.toPlace(), and explicitly requesting data via fetchFields() to ensure users only request the data they need.
• Location Restriction Fix: Manually synced the map's viewport to the element's locationRestriction property. Crucially, this uses .toJSON() (e.g., map.getBounds().toJSON()) to safely bypass React cross-context instanceof object limitations.
• Strict Type Safety: Resolved all @typescript-eslint complaints, including correctly typing custom event listeners, avoiding floating promises on fetchFields(), and strictly typing catch blocks.
• Documentation Expansion: Considerably expanded the README.md to act as a comprehensive guide for developers, specifically calling out common "gotchas" when bridging React and the new Places API.
• Memory leak prevention: Demonstrates correct cleanup using google.maps.event.removeListener(listener). This prevents "zombie" event listeners from persisting when the component remounts.

Testing

• Verified all TypeScript and ESLint checks pass (npm run build).
• Verified the sample successfully runs locally (npm start), successfully biases predictions to the map's current bounds, and correctly fetches Place details/geometry upon selection.

[snippet-bot]

Here is the summary of changes.

You are about to add 5 region tags.

• samples/new-react-sample.sh:27, tag ${REGION_TAG}_app
• samples/new-react-sample.sh:67, tag $REGION_TAG
• samples/rgm-autocomplete/index.html:7, tag maps_react_place_autocomplete_map
• samples/rgm-autocomplete/src/app.tsx:6, tag maps_rgm_autocomplete
• samples/rgm-autocomplete/style.css:6, tag maps_rgm_autocomplete

---

This comment is generated by snippet-bot.
If you find problems with this result, please file an issue at:
https://github.com/googleapis/repo-automation-bots/issues.
To update this comment, add snippet-bot:force-run label or use the checkbox below:

• Refresh this comment