{"id":15039513,"url":"https://github.com/visgl/react-google-maps","last_synced_at":"2025-05-13T15:09:18.849Z","repository":{"id":193152191,"uuid":"569864764","full_name":"visgl/react-google-maps","owner":"visgl","description":"React components and hooks for the Google Maps JavaScript API","archived":false,"fork":false,"pushed_at":"2025-05-08T06:38:22.000Z","size":8641,"stargazers_count":1605,"open_issues_count":50,"forks_count":151,"subscribers_count":18,"default_branch":"main","last_synced_at":"2025-05-12T06:11:20.069Z","etag":null,"topics":["google-maps","google-maps-api","react"],"latest_commit_sha":null,"homepage":"https://visgl.github.io/react-google-maps/","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/visgl.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"docs/contributing.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-11-23T19:43:53.000Z","updated_at":"2025-05-10T20:14:24.000Z","dependencies_parsed_at":"2023-09-07T01:16:52.825Z","dependency_job_id":"289ecaf0-ab98-48fc-bd4e-31bf7039f521","html_url":"https://github.com/visgl/react-google-maps","commit_stats":{"total_commits":329,"total_committers":40,"mean_commits":8.225,"dds":0.6200607902735562,"last_synced_commit":"97a98b2a04b896a892351a178fecafa665c03113"},"previous_names":["visgl/react-google-maps"],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visgl%2Freact-google-maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visgl%2Freact-google-maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visgl%2Freact-google-maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visgl%2Freact-google-maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/visgl","download_url":"https://codeload.github.com/visgl/react-google-maps/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253969238,"owners_count":21992262,"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-maps","google-maps-api","react"],"created_at":"2024-09-24T20:43:07.175Z","updated_at":"2025-05-13T15:09:13.738Z","avatar_url":"https://github.com/visgl.png","language":"TypeScript","readme":"# React Components for the Google Maps JavaScript API\n\n[![MIT License](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/visgl/react-google-maps/tree/main/LICENSE)\n\nThis is a TypeScript / JavaScript library to integrate the Maps JavaScript API\ninto your React application.\nIt comes with a collection of React components to create maps, markers and\ninfowindows, and a set of hooks to use some of the Maps JavaScript API\n[Services][gmp-services] and [Libraries][gmp-libraries].\n\n## Installation\n\nThis library is available on npm as [`@vis.gl/react-google-maps`][npm-package].\n\n```sh\nnpm install @vis.gl/react-google-maps\n```\n\nor\n\n```sh\nyarn add @vis.gl/react-google-maps\n```\n\n_(PowerShell users: since `@` has a special meaning in PowerShell, the\npackage name has to be quoted)_\n\n## Usage\n\nImport the [`APIProvider`][api-provider] and wrap it around all components that should have\naccess to the Maps JavaScript API.\nAny component within the context of the `APIProvider` can use the hooks and\ncomponents provided by this library.\n\nTo render a simple map, add a [`Map`][api-map] component inside the `APIProvider`.\nWithin the `Map` component, you can then add further components like\n[`Marker`][api-marker], [`AdvancedMarker`][api-adv-marker], or\n[`InfoWindow`][api-infowindow] to render content on the map.\n\nFor more advanced use-cases you can even add your own components to the map\nthat make use of `google.maps.OverlayView` or `google.maps.WebGlOverlayView`.\n\n```tsx\nimport {AdvancedMarker, APIProvider, Map} from '@vis.gl/react-google-maps';\n\nfunction App() {\n  const position = {lat: 53.54992, lng: 10.00678};\n\n  return (\n    \u003cAPIProvider apiKey={'YOUR API KEY HERE'}\u003e\n      \u003cMap defaultCenter={position} defaultZoom={10} mapId=\"DEMO_MAP_ID\"\u003e\n        \u003cAdvancedMarker position={position} /\u003e\n      \u003c/Map\u003e\n    \u003c/APIProvider\u003e\n  );\n}\n\nexport default App;\n```\n\nPlease see our [documentation][docs] or [examples][] for more in-depth information\nabout this library.\n\n### Using other libraries of the Maps JavaScript API\n\nBesides rendering maps, the Maps JavaScript API has a lot of\n[additional libraries][gmp-libraries] for things like geocoding, routing, the\nPlaces API, Street View, and a lot more.\n\nThese libraries are not loaded by default, which is why this module provides\nthe [`useMapsLibrary()`][api-use-lib] hook to handle dynamic loading of\nadditional libraries.\n\nFor example, if you just want to use the `google.maps.geocoding.Geocoder` class in\na component and you don't even need a map, it can be implemented like this:\n\n```tsx\nimport {useMap, useMapsLibrary} from '@vis.gl/react-google-maps';\n\nconst MyComponent = () =\u003e {\n  // useMapsLibrary loads the geocoding library, it might initially return `null`\n  // if the library hasn't been loaded. Once loaded, it will return the library\n  // object as it would be returned by `await google.maps.importLibrary()`\n  const geocodingLib = useMapsLibrary('geocoding');\n  const geocoder = useMemo(\n    () =\u003e geocodingLib \u0026\u0026 new geocodingLib.Geocoder(),\n    [geocodingLib]\n  );\n\n  useEffect(() =\u003e {\n    if (!geocoder) return;\n\n    // now you can use `geocoder.geocode(...)` here\n  }, [geocoder]);\n\n  return \u003c\u003e\u003c/\u003e;\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cAPIProvider apiKey={'YOUR API KEY HERE'}\u003e\n      \u003cMyComponent /\u003e\n    \u003c/APIProvider\u003e\n  );\n};\n```\n\n## Examples\n\nExplore our [examples directory on GitHub](./examples) or the\n[examples on our website][examples] for full implementation examples.\n\n## Supported Browsers\n\nBeing a library built around the Google Maps JavaScript API, we follow the\nsame browser-support policy as the Google Maps Team,\n[available here][gmp-browsersupport].\nGenerally, the last two versions of the major browsers are officially supported.\n\nIt is not unlikely that browsers even far outside the given\nrange will still work. We try our best to support as many browsers and\nversions as reasonably possible, but we won't actively investigate issues\nrelated to outdated browser versions.\n\nHowever, if you can suggest small changes that could be made to even\nincrease that range, we will be happy to include them, as long as they don't\nnegatively affect the supported browsers.\n\n## Terms of Service\n\n`@vis.gl/react-google-maps` uses Google Maps Platform services. Use of Google\nMaps Platform services through this library is subject to the\n[Google Maps Platform Terms of Service][gmp-tos].\n\nThis library is not a Google Maps Platform Core Service.\nTherefore, the Google Maps Platform Terms of Service (e.g., Technical\nSupport Services, Service Level Agreements, and Deprecation Policy)\ndo not apply to this library.\n\n## Help and Support\n\nThis library is offered via an open source license. It is not governed by the\nGoogle Maps Platform [Technical Support Services Guidelines][gmp-tssg],\nthe [SLA][gmp-sla], or the [Deprecation Policy][gmp-dp] (however, any Google\nMaps Platform services used by this library remain subject to the Google Maps\nPlatform Terms of Service).\n\nIf you find a bug or have a feature request, please [file an issue][rgm-issues]\non GitHub. If you would like to get answers to technical questions from\nother Google Maps Platform developers, feel free to open a thread in the\n[discussions section on GitHub][rgm-discuss] or ask a question through one of\nour [developer community channels][gmp-community].\n\nIf you'd like to contribute, please check the [Contributing guide][rgm-contrib].\n\nYou can also discuss this library on [our Discord server][gmp-discord].\n\n[api-provider]: https://visgl.github.io/react-google-maps/docs/api-reference/components/api-provider\n[api-map]: https://visgl.github.io/react-google-maps/docs/api-reference/components/map\n[api-marker]: https://visgl.github.io/react-google-maps/docs/api-reference/components/marker\n[api-adv-marker]: https://visgl.github.io/react-google-maps/docs/api-reference/components/advanced-marker\n[api-infowindow]: https://visgl.github.io/react-google-maps/docs/api-reference/components/info-window\n[api-use-lib]: https://visgl.github.io/react-google-maps/docs/api-reference/hooks/use-maps-library\n[docs]: https://visgl.github.io/react-google-maps/docs/\n[examples]: https://visgl.github.io/react-google-maps/examples\n[gmp-services]: https://developers.google.com/maps/documentation/javascript#services\n[gmp-libraries]: https://developers.google.com/maps/documentation/javascript/libraries\n[npm-package]: https://www.npmjs.com/package/@vis.gl/react-google-maps\n[gmp-tos]: https://cloud.google.com/maps-platform/terms\n[gmp-tssg]: https://cloud.google.com/maps-platform/terms/tssg\n[gmp-sla]: https://cloud.google.com/maps-platform/terms/sla\n[gmp-dp]: https://cloud.google.com/maps-platform/terms/other/deprecation-policy\n[rgm-issues]: https://github.com/visgl/react-google-maps/issues\n[rgm-discuss]: https://github.com/visgl/react-google-maps/discussions\n[rgm-contrib]: https://visgl.github.io/react-google-maps/docs/contributing\n[gmp-community]: https://developers.google.com/maps/developer-community\n[gmp-discord]: https://discord.gg/f4hvx8Rp2q\n[gmp-browsersupport]: https://developers.google.com/maps/documentation/javascript/browsersupport\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisgl%2Freact-google-maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisgl%2Freact-google-maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisgl%2Freact-google-maps/lists"}