{"id":13402960,"url":"https://github.com/google-map-react/google-map-react","last_synced_at":"2025-12-12T02:57:09.578Z","repository":{"id":33545798,"uuid":"37191958","full_name":"google-map-react/google-map-react","owner":"google-map-react","description":"Google map library for react that allows rendering components as markers :tada:","archived":false,"fork":false,"pushed_at":"2025-03-11T21:19:25.000Z","size":3486,"stargazers_count":6429,"open_issues_count":163,"forks_count":853,"subscribers_count":83,"default_branch":"master","last_synced_at":"2025-05-05T22:15:55.709Z","etag":null,"topics":["component","google","map","maps","react"],"latest_commit_sha":null,"homepage":"http://google-map-react.github.io/google-map-react/map/main/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/google-map-react.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-06-10T10:58:20.000Z","updated_at":"2025-05-04T15:25:11.000Z","dependencies_parsed_at":"2023-01-15T01:31:20.992Z","dependency_job_id":"881a093e-19d4-491e-b0cb-e144f54a764b","html_url":"https://github.com/google-map-react/google-map-react","commit_stats":{"total_commits":446,"total_committers":95,"mean_commits":"4.6947368421052635","dds":0.5515695067264574,"last_synced_commit":"6fe7e11c4f9e2519097eb59f039681ee573efb8f"},"previous_names":["istarkov/google-map-react"],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-map-react%2Fgoogle-map-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-map-react%2Fgoogle-map-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-map-react%2Fgoogle-map-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-map-react%2Fgoogle-map-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/google-map-react","download_url":"https://codeload.github.com/google-map-react/google-map-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252968118,"owners_count":21833251,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","google","map","maps","react"],"created_at":"2024-07-30T19:01:23.454Z","updated_at":"2025-12-12T02:57:09.570Z","avatar_url":"https://github.com/google-map-react.png","language":"JavaScript","readme":"# Google Map React \u0026middot; [![npm version](https://badge.fury.io/js/google-map-react.svg)](http://badge.fury.io/js/google-map-react) [![Build Status](https://travis-ci.org/google-map-react/google-map-react.svg?branch=master)](https://travis-ci.org/google-map-react/google-map-react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](github.com/google-map-react/google-map-react/CONTRIBUTING.md)\n\n`google-map-react` is a component written over a small set of the [Google Maps API](https://developers.google.com/maps/). 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.\n\nIt allows you to create interfaces like this [example](http://google-map-react.github.io/google-map-react/map/main) *(You can scroll the table, zoom/move the map, hover/click on markers, and click on table rows)*\n\n## Getting started\n\nIn the simple case you just need to add `lat` and `lng` props to any child of `GoogleMapReact` component.\n\n[See it in action at jsbin](https://jsbin.com/ruwogapuke/1/edit?js,output)\n\n```javascript\nimport React from \"react\";\nimport GoogleMapReact from 'google-map-react';\n\nconst AnyReactComponent = ({ text }) =\u003e \u003cdiv\u003e{text}\u003c/div\u003e;\n\nexport default function SimpleMap(){\n  const defaultProps = {\n    center: {\n      lat: 10.99835602,\n      lng: 77.01502627\n    },\n    zoom: 11\n  };\n\n  return (\n    // Important! Always set the container height explicitly\n    \u003cdiv style={{ height: '100vh', width: '100%' }}\u003e\n      \u003cGoogleMapReact\n        bootstrapURLKeys={{ key: \"\" }}\n        defaultCenter={defaultProps.center}\n        defaultZoom={defaultProps.zoom}\n      \u003e\n        \u003cAnyReactComponent\n          lat={59.955413}\n          lng={30.337844}\n          text=\"My Marker\"\n        /\u003e\n      \u003c/GoogleMapReact\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### My map doesn't appear!\n\n- 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](https://developers.google.com/maps/documentation/javascript/tutorial).\n\n\n## Installation\n\nnpm:\n```\nnpm install --save google-map-react\n```\n\nyarn:\n```\nyarn add google-map-react\n```\n\n## Features\n\n### Works with your Components\n\nInstead of the default Google Maps markers, balloons and other map components, you can render your cool animated react components on the map.\n\n### Isomorphic Rendering\n\nIt 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)*\n\n### Component Positions Calculated Independently of Google Maps API\n\nIt renders components on the map before (and even without) the Google Maps API loaded.\n\n### Google Maps API Loads on Demand\n\nThere is no need to place a `\u003cscript src=` tag at top of page. The Google Maps API loads upon the first usage of the `GoogleMapReact` component.\n\n### Use Google Maps API \n\nYou can access to Google Maps `map` and `maps` objects by using `onGoogleApiLoaded`, in this case you will need to set `yesIWantToUseGoogleMapApiInternals` to `true`\n\n```javascript\n...\n\nconst handleApiLoaded = (map, maps) =\u003e {\n  // use map and maps objects\n};\n\n...\n\n\u003cGoogleMapReact\n  bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}\n  defaultCenter={this.props.center}\n  defaultZoom={this.props.zoom}\n  yesIWantToUseGoogleMapApiInternals\n  onGoogleApiLoaded={({ map, maps }) =\u003e handleApiLoaded(map, maps)}\n\u003e\n  \u003cAnyReactComponent\n    lat={59.955413}\n    lng={30.337844}\n    text=\"My Marker\"\n  /\u003e\n\u003c/GoogleMapReact\u003e\n```\n\nPST: Remember to set `yesIWantToUseGoogleMapApiInternals` to true.\n\n[Example here](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/Main.js#L69)\n\n### Internal Hover Algorithm\n\nNow 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](http://google-map-react.github.io/google-map-react/map/main), you will still be able to hover on almost every map marker.\n\n## Examples\n\n* Placing react components on the map:\n[simple](http://google-map-react.github.io/google-map-react/map/simple/) ([source](https://github.com/google-map-react/old-examples/blob/master/web/flux/components/examples/x_simple/simple_map_page.jsx))\n\n* Custom map options:\n[example](http://google-map-react.github.io/google-map-react/map/options/) ([source](https://github.com/google-map-react/old-examples/blob/master/web/flux/components/examples/x_options/options_map_page.jsx))\n\n* Hover effects:\n[simple hover](http://google-map-react.github.io/google-map-react/map/simple_hover/) ([source](https://github.com/google-map-react/old-examples/blob/master/web/flux/components/examples/x_simple_hover/simple_hover_map_page.jsx));\n[distance hover](http://google-map-react.github.io/google-map-react/map/distance_hover/) ([source](https://github.com/google-map-react/old-examples/blob/master/web/flux/components/examples/x_distance_hover/distance_hover_map_page.jsx))\n\n* GoogleMap events:\n[example](http://google-map-react.github.io/google-map-react/map/events/) ([source](https://github.com/google-map-react/old-examples/blob/master/web/flux/components/examples/x_events/events_map_page.jsx))\n\n* Example project:\n[main](http://google-map-react.github.io/google-map-react/map/main/) ([source](https://github.com/google-map-react/old-examples/blob/master/web/flux/components/examples/x_main/main_map_block.jsx)); [balderdash](http://google-map-react.github.io/google-map-react/map/balderdash/) (same source as main)\n\n* Clustering example using Hooks (**new**: [source](https://github.com/leighhalliday/google-maps-clustering), [article](https://www.leighhalliday.com/google-maps-clustering)) [clustering-with-hooks](https://google-maps-clustering.netlify.com/)\n\n* Clustering example ([source](https://github.com/istarkov/google-map-clustering-example))\n[google-map-clustering-example](http://istarkov.github.io/google-map-clustering-example/)\n\n* How to render thousands of markers (**new**: [source](https://github.com/istarkov/google-map-thousands-markers))\n[google-map-thousands-markers](https://istarkov.github.io/google-map-thousands-markers/)\n\n* Examples:\n[Examples](https://github.com/google-map-react/google-map-react-examples)\n[Old examples](https://github.com/google-map-react/old-examples)\n\n* jsbin example\n[jsbin example](https://jsbin.com/ruwogapuke/1/edit?js,output)\n\n* webpackbin examples (**new**)\n[docs with webpackbin examples](./DOC.md) (In progress)\n\n* local develop example (new)\n[develop example](./develop)\n\n## Documentation\n\nYou can find the documentation here:\n\n- [API Reference](./API.md)\n\n- [NEW DOCS](./DOC.md) (In progress)\n\n## Contribute\n\nLocal development is broken into two parts (ideally using two tabs).\n\nFirst, run rollup to watch your `src/` module and automatically recompile it into `dist/` whenever you make changes.\n\n```bash\nnpm start # runs rollup with watch flag\n```\n\nThe second part will be running the `example/` create-react-app that's linked to the local version of your module.\n\n```bash\n# (in another tab)\ncd example\nnpm start # runs create-react-app dev server\n```\n\nNow, 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.\n\n### Manual link-install\nIf 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:\n  1. In the root folder:\n  ```bash\n  npm link\n  ```\n  2. Go into `example/` and (after installing other dependencies) execute:\n  ```bash\n  npm link google-map-react\n  ```\n\n## License\n\n[MIT](./LICENSE.md)\n\n## Known Issues\n\n* Older browsers (http://caniuse.com/#feat=promises) will need a ES6 Promise polyfill in order to work.\n\n## !!! We are looking for contributors\nWe're actively looking for contributors, please send a message to the Owner or any of the Collaborators.\n","funding_links":[],"categories":["JavaScript","\u003e 3k ★","🧰 React Toolkit"],"sub_categories":["Maps"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle-map-react%2Fgoogle-map-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoogle-map-react%2Fgoogle-map-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle-map-react%2Fgoogle-map-react/lists"}