Gathering detailed insights and metrics for @googlemaps/react-wrapper
Gathering detailed insights and metrics for @googlemaps/react-wrapper
Wrap React components with this libary to load the Google Maps JavaScript API.
Installations
npm install @googlemaps/react-wrapperDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, UMD
Node Version
22.14.0
NPM Version
10.9.2
Score
97.9
Supply Chain
100
Quality
87
Maintenance
100
Vulnerability
100
License
Releases
46
Languages
2
TypeScript
JavaScript
TypeScript (55.92%)
JavaScript (44.08%)
Developer
googlemaps
Download Statistics
Total Downloads
19,809,659
Last Day
25,318
Last Week
103,453
Last Month
558,838
Last Year
7,067,096
GitHub Statistics
Apache-2.0 License
380 Stars
799 Commits
54 Forks
14 Watchers
10 Branches
19 Contributors
Updated on Apr 10, 2025
Bundle Size
6.63 kB
Minified
2.61 kB
Minified + Gzipped
Maintainers
4
Package Meta Information
Latest Version
1.2.0
Package Id
@googlemaps/react-wrapper@1.2.0
Unpacked Size
36.33 kB
Size
9.58 kB
File Count
11
NPM Version
10.9.2
Node Version
22.14.0
Published on
Mar 28, 2025
Total Downloads
Cumulative downloads
Total Downloads
19,809,659
Last Day
4.1%
25,318
Compared to previous day
Last Week
-18.6%
103,453
Compared to previous week
Last Month
-14.2%
558,838
Compared to previous month
Last Year
-3.5%
7,067,096
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
Dev Dependencies
29
@babel/preset-react@rollup/plugin-babel@rollup/plugin-commonjs@rollup/plugin-html@rollup/plugin-node-resolve@rollup/plugin-replace@rollup/plugin-typescript@testing-library/dom@testing-library/jest-dom@testing-library/react@types/google.maps@types/jest@types/react@types/react-domeslint-plugin-jesteslint-plugin-reactgtsjestjest-environment-jsdomprettierreactreact-domrolluprollup-plugin-filesizerollup-plugin-terserts-jesttslibtypedoctypescript
Google Maps JavaScript API React Wrapper
[!IMPORTANT]
This library has been archived. We recommend all users of this package to switch to the new@vis.gl/react-google-maps, which provides a collection of components and hooks and can be configured to be fully compatible with this package.See the migration guide for more details on how to switch from this package to
@vis.gl/react-google-maps.
Description
Wrap React components with this library to load the Google Maps JavaScript API.
1import {Wrapper} from '@googlemaps/react-wrapper'; 2 3const MyApp = () => ( 4 <Wrapper apiKey={'YOUR_API_KEY'}> 5 <MyMapComponent /> 6 </Wrapper> 7);
The preceding example will not render any elements unless the Google Maps JavaScript API is successfully loaded. To handle error cases and the time until load is complete, it is recommended to provide render props.
1import {Wrapper, Status} from '@googlemaps/react-wrapper'; 2 3const render = status => { 4 switch (status) { 5 case Status.LOADING: 6 return <Spinner />; 7 case Status.FAILURE: 8 return <ErrorComponent />; 9 case Status.SUCCESS: 10 return <MyMapComponent />; 11 } 12}; 13 14const MyApp = () => <Wrapper apiKey={'YOUR_API_KEY'} render={render} />;
When combining children and render props, the children will render on success and the render prop will be executed for other status values.
1import {Wrapper, Status} from '@googlemaps/react-wrapper'; 2 3const render = (status: Status): ReactElement => { 4 if (status === Status.FAILURE) return <ErrorComponent />; 5 return <Spinner />; 6}; 7 8const MyApp = () => ( 9 <Wrapper apiKey={'YOUR_API_KEY'} render={render}> 10 <MyMapComponent /> 11 </Wrapper> 12);
@googlemaps/js-api-loader
This wrapper uses @googlemaps/js-api-loader to load the Google Maps JavaScript API. This library uses a singleton pattern and will not attempt to load the library more than once. All options accepted by @googlemaps/js-api-loader are also accepted as props to the wrapper component.
MyMapComponent
The following snippets demonstrates the usage of useRef and useEffect hooks with Google Maps.
1function MyMapComponent({
2 center,
3 zoom,
4}: {
5 center: google.maps.LatLngLiteral;
6 zoom: number;
7}) {
8 const ref = useRef<HTMLDivElement>();
9 const [map, setMap] = useState<google.maps.Map | null>(null);
10
11 useEffect(() => {
12 const map = new google.maps.Map(ref.current, {center, zoom});
13 setMap(map);
14
15 return () => {
16 google.maps.event.clearInstanceListeners(map);
17 setMap(null);
18 };
19 }, []);
20
21 useEffect(() => {
22 if (!map) return;
23
24 // do something with the map instance
25 }, [map]);
26
27 return <div ref={ref} id="map" />;
28}Examples
See the examples folder for additional usage patterns.
Install
Available via npm as the package @googlemaps/react-wrapper.
1npm i @googlemaps/react-wrapper
or
1yarn add @googlemaps/react-wrapper
For TypeScript support additionally install type definitions.
1npm i -D @types/google.maps
or
1yarn add -D @types/google.maps
Documentation
The reference documentation can be found at this link.
Support
This library is community supported. We're comfortable enough with the stability and features of the library that we want you to build real production applications on it.
If you find a bug, or have a feature suggestion, please log an issue. If you'd like to contribute, please read How to Contribute.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
security policy file detected
Details
- Info: security policy file detected: SECURITY.md:1
- Info: Found linked content: SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: SECURITY.md:1
- Info: Found text in security policy: SECURITY.md:1
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0
Reason
SAST tool is run on all commits
Details
- Info: SAST configuration detected: CodeQL
- Info: all commits (29) are checked with a SAST tool
Reason
0 existing vulnerabilities detected
Reason
Found 8/9 approved changesets -- score normalized to 8
Reason
5 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 4
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/docs.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/docs.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/docs.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/docs.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-please.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/release-please.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-please.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/release-please.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-please.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/release-please.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-please.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/release-please.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/test.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/test.yml/main?enable=pin
- Info: 0 out of 11 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 3 third-party GitHubAction dependencies pinned
- Info: 3 out of 3 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Info: jobLevel 'actions' permission set to 'read': .github/workflows/codeql.yml:42
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/codeql.yml:43
- Warn: no topLevel permission defined: .github/workflows/codeql.yml:1
- Warn: topLevel 'contents' permission set to 'write': .github/workflows/dependabot.yml:19
- Warn: no topLevel permission defined: .github/workflows/docs.yml:1
- Warn: topLevel 'contents' permission set to 'write': .github/workflows/release-please.yml:24
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Info: no jobLevel write permissions found
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Score
6.6
/10
Last Scanned on 2025-04-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More