diff --git a/package-lock.json b/package-lock.json index 78daf4356..ecdfcc498 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "@vis.gl/react-google-maps": "1.8.3", "dotenv": "^17.4.2", "react": "^19.2.8", - "react-dom": "^19.2.7" + "react-dom": "^19.2.8" }, "devDependencies": { "@eslint/css": "^1.4.0", @@ -1387,6 +1387,10 @@ "resolved": "samples/rectangle-event", "link": true }, + "node_modules/@js-api-samples/rgm-basic-map": { + "resolved": "samples/rgm-basic-map", + "link": true + }, "node_modules/@js-api-samples/routes-compute-routes": { "resolved": "samples/routes-compute-routes", "link": true @@ -5647,15 +5651,15 @@ } }, "node_modules/react-dom": { - "version": "19.2.7", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz", - "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==", + "version": "19.2.8", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz", + "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==", "license": "MIT", "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { - "react": "^19.2.7" + "react": "^19.2.8" } }, "node_modules/readable-stream": { @@ -6968,6 +6972,10 @@ "name": "@js-api-samples/rectangle-event", "version": "1.0.0" }, + "samples/rgm-basic-map": { + "name": "@js-api-samples/rgm-basic-map", + "version": "1.0.0" + }, "samples/routes-compute-routes": { "name": "@js-api-samples/routes-compute-routes", "version": "1.0.0" diff --git a/package.json b/package.json index a6af3ad9b..e50e50d4f 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "@vis.gl/react-google-maps": "1.8.3", "dotenv": "^17.4.2", "react": "^19.2.8", - "react-dom": "^19.2.7" + "react-dom": "^19.2.8" }, "overrides": { "fast-xml-parser": "5.7.1", diff --git a/samples/rgm-basic-map/README.md b/samples/rgm-basic-map/README.md new file mode 100644 index 000000000..e7d71de9d --- /dev/null +++ b/samples/rgm-basic-map/README.md @@ -0,0 +1,62 @@ +# 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..ee7053e58 --- /dev/null +++ b/samples/rgm-basic-map/index.html @@ -0,0 +1,36 @@ + + + + + + + + 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..535372f5f --- /dev/null +++ b/samples/rgm-basic-map/src/app.tsx @@ -0,0 +1,38 @@ +/** + * @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*"] +}