Gathering detailed insights and metrics for google-map-react
Gathering detailed insights and metrics for google-map-react
Google map library for react that allows rendering components as markers 🎉
Installations
npm install google-map-reactDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=10
Node Version
23.6.1
NPM Version
10.9.2
Releases
32
Languages
3
JavaScript
HTML
CSS
JavaScript (97.64%)
HTML (1.82%)
CSS (0.54%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
6,443 Stars
484 Commits
855 Forks
83 Watchers
5 Branches
93 Contributors
Updated on Jul 11, 2025
Maintainers
2
Package Meta Information
Latest Version
2.2.5
Package Id
google-map-react@2.2.5
Unpacked Size
491.37 kB
Size
143.92 kB
File Count
9
NPM Version
10.9.2
Node Version
23.6.1
Published on
May 23, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
21
babel-eslintcross-enveslinteslint-config-prettiereslint-config-standardeslint-config-standard-reacteslint-plugin-importeslint-plugin-nodeeslint-plugin-prettiereslint-plugin-promiseeslint-plugin-reacteslint-plugin-standardexpectgh-pagesjsdommicrobundle-crlnpm-run-allprettierreactreact-domreact-scripts
Google Map React · 
google-map-react is a component written over a small set of the Google Maps API. It allows you to render any React component on the Google Map. It is fully isomorphic and can render on a server. Additionally, it can render map components in the browser even if the Google Maps API is not loaded. It uses an internal, tweakable hover algorithm - every object on the map can be hovered.
It allows you to create interfaces like this example (You can scroll the table, zoom/move the map, hover/click on markers, and click on table rows)
Getting started
In the simple case you just need to add lat and lng props to any child of GoogleMapReact component.
1import React from "react"; 2import GoogleMapReact from 'google-map-react'; 3 4const AnyReactComponent = ({ text }) => <div>{text}</div>; 5 6export default function SimpleMap(){ 7 const defaultProps = { 8 center: { 9 lat: 10.99835602, 10 lng: 77.01502627 11 }, 12 zoom: 11 13 }; 14 15 return ( 16 // Important! Always set the container height explicitly 17 <div style={{ height: '100vh', width: '100%' }}> 18 <GoogleMapReact 19 bootstrapURLKeys={{ key: "" }} 20 defaultCenter={defaultProps.center} 21 defaultZoom={defaultProps.zoom} 22 > 23 <AnyReactComponent 24 lat={59.955413} 25 lng={30.337844} 26 text="My Marker" 27 /> 28 </GoogleMapReact> 29 </div> 30 ); 31}
My map doesn't appear!
- Make sure the container element has width and height. The map will try to fill the parent container, but if the container has no size, the map will collapse to 0 width / height. This is not a requirement for google-map-react, it's a requirement for google-maps in general.
Installation
npm:
npm install --save google-map-react
yarn:
yarn add google-map-react
Features
Works with your Components
Instead of the default Google Maps markers, balloons and other map components, you can render your cool animated react components on the map.
Isomorphic Rendering
It renders on the server. (Welcome search engines) (you can disable javascript in browser dev tools, and reload any example page to see how it works)
Component Positions Calculated Independently of Google Maps API
It renders components on the map before (and even without) the Google Maps API loaded.
Google Maps API Loads on Demand
There is no need to place a <script src= tag at top of page. The Google Maps API loads upon the first usage of the GoogleMapReact component.
Use Google Maps API
You can access to Google Maps map and maps objects by using onGoogleApiLoaded, in this case you will need to set yesIWantToUseGoogleMapApiInternals to true
1... 2 3const handleApiLoaded = (map, maps) => { 4 // use map and maps objects 5}; 6 7... 8 9<GoogleMapReact 10 bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }} 11 defaultCenter={this.props.center} 12 defaultZoom={this.props.zoom} 13 yesIWantToUseGoogleMapApiInternals 14 onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)} 15> 16 <AnyReactComponent 17 lat={59.955413} 18 lng={30.337844} 19 text="My Marker" 20 /> 21</GoogleMapReact>
PST: Remember to set yesIWantToUseGoogleMapApiInternals to true.
Internal Hover Algorithm
Now every object on the map can be hovered (however, you can still use css hover selectors if you want). If you try zooming out here example, you will still be able to hover on almost every map marker.
Examples
-
Hover effects: simple hover (source); distance hover (source)
-
Example project: main (source); balderdash (same source as main)
-
Clustering example using Hooks (new: source, article) clustering-with-hooks
-
Clustering example (source) google-map-clustering-example
-
How to render thousands of markers (new: source) google-map-thousands-markers
-
Examples: Examples Old examples
-
jsbin example jsbin example
-
webpackbin examples (new) docs with webpackbin examples (In progress)
-
local develop example (new) develop example
Documentation
You can find the documentation here:
-
NEW DOCS (In progress)
Contribute
Local development is broken into two parts (ideally using two tabs).
First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.
1npm start # runs rollup with watch flag
The second part will be running the example/ create-react-app that's linked to the local version of your module.
1# (in another tab) 2cd example 3npm start # runs create-react-app dev server
Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.
Manual link-install
If you get the error Module not found: Can't resolve 'google-react-map'... while trying to run the example app, you need to manually link your local development module, try the following steps:
- In the root folder:
1npm link
- Go into
example/and (after installing other dependencies) execute:
1npm link google-map-react
License
Known Issues
- Older browsers (http://caniuse.com/#feat=promises) will need a ES6 Promise polyfill in order to work.
!!! We are looking for contributors
We're actively looking for contributors, please send a message to the Owner or any of the Collaborators.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
6 commit(s) and 4 issue activity found in the last 90 days -- score normalized to 8
Reason
Found 8/16 approved changesets -- score normalized to 5
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/google-map-react/google-map-react/npm-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/google-map-react/google-map-react/npm-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/google-map-react/google-map-react/npm-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/google-map-react/google-map-react/npm-publish.yml/master?enable=pin
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 2 out of 2 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/npm-publish.yml:1
- Info: no jobLevel write permissions found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 22 are checked with a SAST tool
Reason
97 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-r6rj-9ch6-g264
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w
- Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf
- Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Score
3.9
/10
Last Scanned on 2025-07-07
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