{"id":23338231,"url":"https://github.com/giorgiabosello/google-maps-react-markers","last_synced_at":"2025-04-05T03:09:48.428Z","repository":{"id":63461538,"uuid":"567665839","full_name":"giorgiabosello/google-maps-react-markers","owner":"giorgiabosello","description":"Google Maps library that accepts markers as react components and works with React 18+.","archived":false,"fork":false,"pushed_at":"2024-05-21T07:49:02.000Z","size":2604,"stargazers_count":130,"open_issues_count":0,"forks_count":19,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-21T08:58:25.574Z","etag":null,"topics":["google-map-react","google-maps","google-maps-api","google-maps-react","javascript","map","maps","markers","react","typescript"],"latest_commit_sha":null,"homepage":"https://giorgiabosello.github.io/google-maps-react-markers/","language":"TypeScript","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/giorgiabosello.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"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":"2022-11-18T09:43:19.000Z","updated_at":"2024-05-27T12:14:53.025Z","dependencies_parsed_at":"2024-01-03T10:41:53.842Z","dependency_job_id":"4955d7c0-e8dd-4f9e-86a1-f1238fcb0bc0","html_url":"https://github.com/giorgiabosello/google-maps-react-markers","commit_stats":{"total_commits":61,"total_committers":6,"mean_commits":"10.166666666666666","dds":0.3770491803278688,"last_synced_commit":"d4b70a3ae02df2216df518857cb9196445fdd6ac"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giorgiabosello%2Fgoogle-maps-react-markers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giorgiabosello%2Fgoogle-maps-react-markers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giorgiabosello%2Fgoogle-maps-react-markers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giorgiabosello%2Fgoogle-maps-react-markers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/giorgiabosello","download_url":"https://codeload.github.com/giorgiabosello/google-maps-react-markers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280272,"owners_count":20912967,"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":["google-map-react","google-maps","google-maps-api","google-maps-react","javascript","map","maps","markers","react","typescript"],"created_at":"2024-12-21T03:12:48.309Z","updated_at":"2025-04-05T03:09:48.409Z","avatar_url":"https://github.com/giorgiabosello.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/giorgiabosello","https://www.paypal.me/giorgiabosello"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eGoogle Maps React Markers\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/google-maps-react-markers\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/npm/v/google-maps-react-markers.svg?style=for-the-badge\u0026labelColor=000000\" alt=\"NPM\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://npm-stat.com/charts.html?package=google-maps-react-markers\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/npm/dt/google-maps-react-markers.svg?style=for-the-badge\u0026labelColor=000000\" alt=\"NPM total downloads\" title=\"last year\"\u003e\n\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/badge/Maintained%3F-yes-green.svg?style=for-the-badge\u0026labelColor=000000\" alt=\"Maintained\" /\u003e\n\u003ca href=\"https://github.com/giorgiabosello/google-maps-react-markers/blob/master/LICENCE.md\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/github/license/giorgiabosello/google-maps-react-markers?style=for-the-badge\u0026labelColor=000000\" alt=\"GitHub license: MIT\" /\u003e\n\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/github/stars/giorgiabosello/google-maps-react-markers?style=for-the-badge\u0026labelColor=000000\" alt=\"GitHub stars\" /\u003e\n\u003ca href=\"https://github.com/giorgiabosello/google-maps-react-markers/issues\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/github/issues/giorgiabosello/google-maps-react-markers?style=for-the-badge\u0026labelColor=000000\" alt=\"GitHub open issues\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://makeapullrequest.com/\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge\u0026labelColor=000000\" alt=\"PRs welcome\" /\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\nGoogle Maps library that accepts markers as react components and works with React 18+.\n\nIt supports a small set of the props of [Google Map React](https://github.com/google-map-react/google-map-react). Clustering also is possible.\nThe library implements [Google Maps Custom Overlays](https://developers.google.com/maps/documentation/javascript/customoverlays) official library.\n\n**If you like this library, please consider supporting me ❤️**\n\n[![Buy me a Coffee](https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge\u0026logo=buy-me-a-coffee\u0026logoColor=black)](https://www.buymeacoffee.com/giorgiabosello)\n[![PayPal](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge\u0026logo=paypal\u0026logoColor=white)](https://www.paypal.me/giorgiabosello)\n\n## 💬 Discussion\n\n\u003e **Released TypeScript version of the library!**\n\nFeedbacks are welcome in [this discussion](https://github.com/giorgiabosello/google-maps-react-markers/discussions/109).\n\n## 🚀 Demo\n\n\u003ca href=\"https://giorgiabosello.github.io/google-maps-react-markers/\" target=\"blank\"\u003e\n\u003cimg src=\"https://img.shields.io/website?url=https%3A%2F%2Fgiorgiabosello.github.io%2Fgoogle-maps-react-markers\u0026logo=github\u0026style=for-the-badge\u0026labelColor=000000\" /\u003e\n\u003c/a\u003e\n\nSee it in action [here](https://giorgiabosello.github.io/google-maps-react-markers/) _(API KEY not provided)_.\n\nDemo source code is available [here](https://github.com/giorgiabosello/google-maps-react-markers/tree/master/docs/src).\n\n## 🛠 Install\n\n```bash\npnpm add google-maps-react-markers\n```\n\nor\n\n```bash\nyarn add google-maps-react-markers\n```\n\nor\n\n```bash\nnpm install --save google-maps-react-markers\n```\n\n## 💻 Usage\n\n```jsx\nimport GoogleMap from 'google-maps-react-markers'\n\nconst App = () =\u003e {\n  const mapRef = useRef(null)\n  const [mapReady, setMapReady] = useState(false)\n\n  /**\n   * @description This function is called when the map is ready\n   * @param {Object} map - reference to the map instance\n   * @param {Object} maps - reference to the maps library\n   */\n  const onGoogleApiLoaded = ({ map, maps }) =\u003e {\n    mapRef.current = map\n    setMapReady(true)\n  }\n\n  const onMarkerClick = (e, { markerId, lat, lng }) =\u003e {\n    console.log('This is -\u003e', markerId)\n\n    // inside the map instance you can call any google maps method\n    mapRef.current.setCenter({ lat, lng })\n    // ref. https://developers.google.com/maps/documentation/javascript/reference?hl=it\n  }\n\n  return (\n    \u003c\u003e\n      {mapReady \u0026\u0026 \u003cdiv\u003eMap is ready. See for logs in developer console.\u003c/div\u003e}\n      \u003cGoogleMap\n        apiKey=\"\"\n        defaultCenter={{ lat: 45.4046987, lng: 12.2472504 }}\n        defaultZoom={5}\n        options={mapOptions}\n        mapMinHeight=\"100vh\"\n        onGoogleApiLoaded={onGoogleApiLoaded}\n        onChange={(map) =\u003e console.log('Map moved', map)}\n      \u003e\n        {coordinates.map(({ lat, lng, name }, index) =\u003e (\n          \u003cMarker\n            key={index}\n            lat={lat}\n            lng={lng}\n            markerId={name}\n            onClick={onMarkerClick} // you need to manage this prop on your Marker component!\n            // draggable={true}\n            // onDragStart={(e, { latLng }) =\u003e {}}\n            // onDrag={(e, { latLng }) =\u003e {}}\n            // onDragEnd={(e, { latLng }) =\u003e {}}\n          /\u003e\n        ))}\n      \u003c/GoogleMap\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default App\n```\n\n## 🧐 Props\n\n### GoogleMap component\n\n| Prop                 | Type     | Required | Default                     | Description                                                                                                                                                                           |\n| -------------------- | -------- | -------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **apiKey**           | string   | **yes**  | `''`                        | API Key to load Google Maps                                                                                                                                                           |\n| **defaultCenter**    | object   | **yes**  | `{ lat: 0, lng: 0 }`        | Default center of the map                                                                                                                                                             |\n| **defaultZoom**      | number   | **yes**  | `1-20`                      | Default zoom of the map                                                                                                                                                               |\n| libraries            | array    | no       | `['places', 'geometry']`    | Libraries to load                                                                                                                                                                     |\n| options              | object   | no       | `{}`                        | Options for the map                                                                                                                                                                   |\n| onGoogleApiLoaded    | function | no       | `() =\u003e {}`                  | Callback when the map is loaded                                                                                                                                                       |\n| onChange             | function | no       | `() =\u003e {}`                  | Callback when the map has changed                                                                                                                                                     |\n| events               | array    | no       | `[]`                        | Array of objects name/handler of [DOM events](https://en.wikipedia.org/wiki/DOM_event) to pass down to the `div` overlay. Example: `events: [{ name: 'onClick', handler: () =\u003e {} }]` |\n| children             | node     | no       | `null`                      | Markers of the map                                                                                                                                                                    |\n| loadScriptExternally | bool     | no       | `false`                     | Whether to load the Google Maps script externally.\u003cbr\u003eIf `true`, the `status` prop is required and it will be used to control the loading of the script                               |\n| status               | string   | no       | `idle`                      | The forced status of the Google Maps script. Depends on `loadScriptExternally`.\u003cbr\u003eIt can be one of `idle`, `loading`, `ready`, `error`                                               |\n| loadingContent       | node     | no       | `'Google Maps is loading'`  | Content to show while the map is loading                                                                                                                                              |\n| idleContent          | node     | no       | `'Google Maps is on idle'`  | Content to show when the map is idle                                                                                                                                                  |\n| errorContent         | node     | no       | `'Google Maps is on error'` | Content to show when the map has an error                                                                                                                                             |\n| mapMinHeight         | string   | no       | `'unset'`                   | Min height of the map                                                                                                                                                                 |\n| containerProps       | object   | no       | `{}`                        | Props for the div container of the map                                                                                                                                                |\n| scriptCallback       | function | no       | `() =\u003e {}`                  | window global callback passed to the Google Script                                                                                                                                    |\n| externalApiParams    | object   | no       | `undefined`                 | Optional params to pass to the Google API script. Eg. `{region: 'IT', language: 'it'}`                                                                                                |\n\n### Markers\n\n| Prop        | Type   | Required | Default     | Description                                                                                              |\n| ----------- | ------ | -------- | ----------- | -------------------------------------------------------------------------------------------------------- |\n| **lat**     | number | **yes**  | `undefined` | Latitude of the marker                                                                                   |\n| **lng**     | number | **yes**  | `undefined` | Longitude of the marker                                                                                  |\n| draggable   | bool   | no       | `false`     | If true, the marker can be dragged                                                                       |\n| onDragStart | func   | no       | `() =\u003e {}`  | This event is fired when the user starts dragging the marker                                             |\n| onDrag      | func   | no       | `() =\u003e {}`  | This event is repeatedly fired while the user drags the marker                                           |\n| onDragEnd   | func   | no       | `() =\u003e {}`  | This event is fired when the user stops dragging the marker                                              |\n| zIndex      | number | no       | 0           | The z-index of the marker. To bring the marker to the front, e.g. when it is active, set a higher value. |\n\n## 📍 Clustering\n\nFor clustering, follow this [guide](https://www.leighhalliday.com/google-maps-clustering) using [useSupercluster Hook](https://github.com/leighhalliday/use-supercluster), but use bounds in this way:\n\n```jsx\nconst [mapBounds, setMapBounds] = useState({\n  bounds: [0, 0, 0, 0],\n  zoom: 0,\n})\nconst onMapChange = ({ bounds, zoom }) =\u003e {\n  const ne = bounds.getNorthEast()\n  const sw = bounds.getSouthWest()\n  /**\n   * useSupercluster accepts bounds in the form of [westLng, southLat, eastLng, northLat]\n   * const { clusters, supercluster } = useSupercluster({\n   *\tpoints: points,\n   *\tbounds: mapBounds.bounds,\n   *\tzoom: mapBounds.zoom,\n   * })\n   */\n  setMapBounds({ ...mapBounds, bounds: [sw.lng(), sw.lat(), ne.lng(), ne.lat()], zoom })\n}\n```\n\n## 👥 Contributing\n\nTo run the project locally, clone the repo and run:\n\n```bash\n# in the root directory\nyarn --frozen-install\nyarn dev\n```\n\n```bash\n# in another tab (with NextJS and SSR)\ncd docs\nyarn install\nyarn dev\n```\n\nDo your changes to `src/` or `docs/src` directory, commits all files in the root directory (`yarn.lock` and ones in `dist` too) and open a PR.\n\n## 💻 Built with\n\n- [React](https://reactjs.org/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Google Maps Custom Overlays](https://developers.google.com/maps/documentation/javascript/customoverlays)\n- [tsup](https://github.com/egoist/tsup): for bundling\n- [ESLint](https://eslint.org/): for linting\n- [Prettier](https://prettier.io/): for code formatting\n\n## 🗒 License\n\nMIT © [giorgiabosello](https://github.com/giorgiabosello)\n\n## 🙏 Support\n\n[![Buy me a Coffee](https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge\u0026logo=buy-me-a-coffee\u0026logoColor=black)](https://www.buymeacoffee.com/giorgiabosello)\n[![PayPal](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge\u0026logo=paypal\u0026logoColor=white)](https://www.paypal.me/giorgiabosello)\n\n\u003chr\u003e\n\u003cp align=\"center\"\u003e\nDeveloped with ❤️ in Italy 🇮🇹 \n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiorgiabosello%2Fgoogle-maps-react-markers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgiorgiabosello%2Fgoogle-maps-react-markers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiorgiabosello%2Fgoogle-maps-react-markers/lists"}