From f0578b61cf07df20c594fbc339de2fa7f59b4b7b Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 6 Aug 2026 12:38:09 -0700 Subject: [PATCH 1/6] feat: Migrate rgm-basic-map using react-web-components-markers Change-Id: I912f02dbeb3c0b5af018ce934b5ca6423ac1fedc --- samples/rgm-basic-map/README.md | 57 +++++++++++++++++++++++++++++ samples/rgm-basic-map/index.html | 38 +++++++++++++++++++ samples/rgm-basic-map/package.json | 13 +++++++ samples/rgm-basic-map/src/app.tsx | 39 ++++++++++++++++++++ samples/rgm-basic-map/tsconfig.json | 8 ++++ 5 files changed, 155 insertions(+) create mode 100644 samples/rgm-basic-map/README.md create mode 100644 samples/rgm-basic-map/index.html create mode 100644 samples/rgm-basic-map/package.json create mode 100644 samples/rgm-basic-map/src/app.tsx create mode 100644 samples/rgm-basic-map/tsconfig.json diff --git a/samples/rgm-basic-map/README.md b/samples/rgm-basic-map/README.md new file mode 100644 index 000000000..3c2bebe02 --- /dev/null +++ b/samples/rgm-basic-map/README.md @@ -0,0 +1,57 @@ +# Google Maps JavaScript Sample + +## rgm-basic-map + +React Google Maps Library - Basic Map + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/rgm-basic-map` +`npm start` + +### Build an individual example + +`cd samples/rgm-basic-map` +`npm run build` + +From 'samples': + +`npm run build --workspace=rgm-basic-map/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/rgm-basic-map` +`npx eslint index.ts` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). + +## Integrating React with the Google Maps JavaScript API + +When integrating Google Maps within a React application, this sample implements several key best practices using the open source `@vis.gl/react-google-maps` library. + +### 1. APIProvider +The `` component is used at the root of the application to load the Google Maps JavaScript API script once. It handles the API loading state and makes the Google Maps instance available to all child components via React Context. + +### 2. Map Component +Instead of manually instantiating `new google.maps.Map()` and attaching it to a DOM node, the `` component allows you to define the map declaratively. +* By using `defaultCenter` and `defaultZoom`, we create an "uncontrolled" map component where the map manages its own state internally, while still initializing it to the correct location. +* The `mapId` property is passed to enable Cloud-based Maps Styling and Advanced Markers. + +### 3. Advanced Markers +The legacy `google.maps.Marker` class is deprecated. This sample uses the `` component to declaratively render the modern `AdvancedMarkerElement` directly on the map. +* **Gotcha:** `AdvancedMarker` requires a valid `mapId` to be provided to the parent `` component to function correctly. diff --git a/samples/rgm-basic-map/index.html b/samples/rgm-basic-map/index.html new file mode 100644 index 000000000..314819197 --- /dev/null +++ b/samples/rgm-basic-map/index.html @@ -0,0 +1,38 @@ + + + + + + + + React - Basic Map + + + + + +
+ + + diff --git a/samples/rgm-basic-map/package.json b/samples/rgm-basic-map/package.json new file mode 100644 index 000000000..dfcbcca4a --- /dev/null +++ b/samples/rgm-basic-map/package.json @@ -0,0 +1,13 @@ +{ + "name": "@js-api-samples/rgm-basic-map", + "version": "1.0.0", + "type": "module", + "scripts": { + "build": "bash ../build-single.sh", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --config ../../vite.config.js --base './' && vite --config ../../vite.config.js", + "build:vite": "vite build --config ../../vite.config.js --base './'", + "preview": "vite preview --config ../../vite.config.js" + }, + "author": "Google LLC" +} diff --git a/samples/rgm-basic-map/src/app.tsx b/samples/rgm-basic-map/src/app.tsx new file mode 100644 index 000000000..f7a6a79ed --- /dev/null +++ b/samples/rgm-basic-map/src/app.tsx @@ -0,0 +1,39 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_rgm_basic_map] +import React from 'react'; +import { createRoot } from 'react-dom/client'; +import { APIProvider, Map, AdvancedMarker } from '@vis.gl/react-google-maps'; + +const API_KEY = 'GOOGLE_MAPS_API_KEY'; + +export default function App() { + return ( + + + + + + ); +} + +export function renderToDom(container: HTMLElement) { + const root = createRoot(container); + root.render( + + + + ); +} +// [END maps_rgm_basic_map] diff --git a/samples/rgm-basic-map/tsconfig.json b/samples/rgm-basic-map/tsconfig.json new file mode 100644 index 000000000..b7054a4ed --- /dev/null +++ b/samples/rgm-basic-map/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../tsconfig.react-base.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src" + }, + "include": ["./src/**/*.ts*"] +} From d8675390776a1cb5b2510cb30932b38ab36dbb41 Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 6 Aug 2026 12:39:46 -0700 Subject: [PATCH 2/6] Applied prettier formatting. Change-Id: Id920215ca434b63cb32e808b8bb234e9249e9dc4 --- samples/rgm-basic-map/README.md | 13 +++++++++---- samples/rgm-basic-map/index.html | 4 +++- samples/rgm-basic-map/src/app.tsx | 3 +-- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/samples/rgm-basic-map/README.md b/samples/rgm-basic-map/README.md index 3c2bebe02..e7d71de9d 100644 --- a/samples/rgm-basic-map/README.md +++ b/samples/rgm-basic-map/README.md @@ -45,13 +45,18 @@ For feedback related to this sample, please open a new issue on When integrating Google Maps within a React application, this sample implements several key best practices using the open source `@vis.gl/react-google-maps` library. ### 1. APIProvider + The `` component is used at the root of the application to load the Google Maps JavaScript API script once. It handles the API loading state and makes the Google Maps instance available to all child components via React Context. ### 2. Map Component -Instead of manually instantiating `new google.maps.Map()` and attaching it to a DOM node, the `` component allows you to define the map declaratively. -* By using `defaultCenter` and `defaultZoom`, we create an "uncontrolled" map component where the map manages its own state internally, while still initializing it to the correct location. -* The `mapId` property is passed to enable Cloud-based Maps Styling and Advanced Markers. + +Instead of manually instantiating `new google.maps.Map()` and attaching it to a DOM node, the `` component allows you to define the map declaratively. + +- By using `defaultCenter` and `defaultZoom`, we create an "uncontrolled" map component where the map manages its own state internally, while still initializing it to the correct location. +- The `mapId` property is passed to enable Cloud-based Maps Styling and Advanced Markers. ### 3. Advanced Markers + The legacy `google.maps.Marker` class is deprecated. This sample uses the `` component to declaratively render the modern `AdvancedMarkerElement` directly on the map. -* **Gotcha:** `AdvancedMarker` requires a valid `mapId` to be provided to the parent `` component to function correctly. + +- **Gotcha:** `AdvancedMarker` requires a valid `mapId` to be provided to the parent `` component to function correctly. diff --git a/samples/rgm-basic-map/index.html b/samples/rgm-basic-map/index.html index 314819197..76d186996 100644 --- a/samples/rgm-basic-map/index.html +++ b/samples/rgm-basic-map/index.html @@ -8,7 +8,9 @@ - + React - Basic Map