{"id":13880840,"url":"https://github.com/ubilabs/google-maps-react-hooks","last_synced_at":"2025-07-16T17:31:12.137Z","repository":{"id":40287019,"uuid":"256162009","full_name":"ubilabs/google-maps-react-hooks","owner":"ubilabs","description":"The JavaScript library to easily implement a Google Maps map into your react application. It comes with a collection of React hooks to access the map instance or different Maps JavaScript Services.","archived":false,"fork":false,"pushed_at":"2023-10-04T01:41:37.000Z","size":1982,"stargazers_count":77,"open_issues_count":12,"forks_count":13,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2024-11-24T09:34:11.571Z","etag":null,"topics":["frontend","googlemaps","googlemaps-api","javascript","library","react","react-hooks"],"latest_commit_sha":null,"homepage":"","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/ubilabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2020-04-16T08:58:29.000Z","updated_at":"2024-02-13T10:39:52.000Z","dependencies_parsed_at":"2024-01-04T07:46:43.405Z","dependency_job_id":null,"html_url":"https://github.com/ubilabs/google-maps-react-hooks","commit_stats":{"total_commits":298,"total_committers":12,"mean_commits":"24.833333333333332","dds":0.3959731543624161,"last_synced_commit":"099d3fc8360beb79a102d118c3939f6e9be58011"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/ubilabs/google-maps-react-hooks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubilabs%2Fgoogle-maps-react-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubilabs%2Fgoogle-maps-react-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubilabs%2Fgoogle-maps-react-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubilabs%2Fgoogle-maps-react-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ubilabs","download_url":"https://codeload.github.com/ubilabs/google-maps-react-hooks/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubilabs%2Fgoogle-maps-react-hooks/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265527546,"owners_count":23782480,"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":["frontend","googlemaps","googlemaps-api","javascript","library","react","react-hooks"],"created_at":"2024-08-06T08:03:32.164Z","updated_at":"2025-07-16T17:31:11.459Z","avatar_url":"https://github.com/ubilabs.png","language":"TypeScript","readme":"# Google Maps React Hooks\n\n[![npm version](https://img.shields.io/npm/v/@ubilabs/google-maps-react-hooks)](https://www.npmjs.com/package/@ubilabs/google-maps-react-hooks) [![GitHub license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)\n\n## Description\n\nThis is a JavaScript library to easily implement a Google Maps map into your React application. It comes with a collection of React hooks to access the Google Maps map instance all over your components and to use some of the Google Maps [Services](https://developers.google.com/maps/documentation/javascript#services) or [Libraries](https://developers.google.com/maps/documentation/javascript#libraries).\n\n#### Table of contents\n\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Library](#library)\n- [Basic Google Map Setup](#basic-google-map-setup)\n- [Hooks](#hooks)\n  - [Hooks Overview](#hooks-overview)\n  - [Hooks Example Setup](#hooks-example-setup)\n- [Examples](#examples)\n  - [Examples Overview](#examples-overview)\n- [Development](#development-only-for-maintainers)\n  - [Contribution](#contribution)\n  - [Quick Start](#quick-start)\n\n## Requirements\n\nYou need to have React [16.8.0](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) or later installed to use the Hooks API.\n\n## Installation\n\n```sh\nnpm install @ubilabs/google-maps-react-hooks -D\n```\n\n**NOTE FOR WINDOWS USERS**:\nWe are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.\n\n## Library\n\nThe full Google Maps React Hooks library can be found in the [library directory](./library).\n\n## Basic Google Map Setup\n\nImport the `GoogleMapsProvider` and wrap it around your components.\nMake sure all components that should have access to the Google Maps map instance are nested inside the `GoogleMapsProvider`.\n\nIf you still can't see a map on your page, make sure that your map container has a `height` CSS property (by default it usually has no height) and that a `center` and `zoom` was set for your map.\n\n```tsx\nimport React, {useState, useCallback, forwardRef} from 'react';\nimport {GoogleMapsProvider} from '@ubilabs/google-maps-react-hooks';\n\nfunction App() {\n  const [mapContainer, setMapContainer] = useState(null);\n  const mapRef = useCallback(node =\u003e {\n    node \u0026\u0026 setMapContainer(node);\n  }, []);\n\n  const mapOptions = {\n    // Add your map options here\n    // `center` and `zoom` are required for every map to be displayed\n    center: {lat: 53.5582447, lng: 9.647645},\n    zoom: 6\n  };\n\n  return (\n    \u003cGoogleMapsProvider\n      googleMapsAPIKey=\"YOUR API KEY HERE\"\n      mapContainer={mapContainer}\n      mapOptions={mapOptions}\u003e\n      \u003cReact.StrictMode\u003e\n        \u003cdiv ref={ref} style={{height: '100%'}} /\u003e\n      \u003c/React.StrictMode\u003e\n    \u003c/GoogleMapsProvider\u003e\n  );\n}\n\nexport default App;\n```\n\nThe `GoogleMapsProvider` makes the Google Maps map instance available to any nested components with the `useGoogleMap` hook.\n\n```tsx\nimport React from 'react';\nimport {useGoogleMap} from '@ubilabs/google-maps-react-hooks';\n\nconst MyComponent = () =\u003e {\n  const map = useGoogleMap();\n\n  // Do something with the Google Maps map instance\n\n  return (...);\n};\n```\n\n## Hooks\n\nAll hooks can be found [here](./library/src/hooks/). Please checkout the [documentation](./library/docs) for each hook and have a look at the [examples directory](./examples) to see how each hook can be implemented.\n\n### Hooks Overview\n\n- [useGoogleMap](./library/docs/useGoogleMap.md)\n- [useDirectionsService](./library/docs/useDirectionsService.md)\n- [useDistanceMatrixService](./library/docs/useDistanceMatrixService.md)\n- [useElevationService](./library/docs/useElevationService.md)\n- [useGeocodingService](./library/docs/useGeocodingService.md)\n- [useMaxZoomService](./library/docs/useMaxZoomService.md)\n- [usePlacesService](./library/docs/usePlacesService.md)\n- [useAutocomplete](./library/docs/useAutocomplete.md)\n- [useAutocompleteService](./library/docs/useAutocompleteService.md)\n\n### Hooks Example Setup\n\n**useGeocodingService**\n\n```tsx\nimport React from 'react';\nimport {useGeocodingService} from '@ubilabs/google-maps-react-hooks';\n\nconst MyComponent = () =\u003e {\n  const geocoder = useGeocodingService();\n\n  // Do something with the geocoder\n\n  return (...);\n};\n```\n\n**useAutocomplete**\n\n```tsx\nimport React, {useRef, useState} from 'react';\nimport {useAutocomplete} from '@ubilabs/google-maps-react-hooks';\n\nconst MyComponent = () =\u003e {\n  const inputRef = useRef(null);\n  const [inputValue, setInputValue] = useState('');\n\n  const onPlaceChanged = place =\u003e {\n    if (place) {\n      setInputValue(place.formatted_address || place.name);\n    }\n\n    // Keep focus on input element\n    inputRef.current \u0026\u0026 inputRef.current.focus();\n  };\n\n  useAutocomplete({\n    inputField: inputRef \u0026\u0026 inputRef.current,\n    onPlaceChanged\n  });\n\n  const handleInputChange = event =\u003e {\n    setInputValue(event.target.value);\n  };\n\n  return (\n    \u003cinput ref={inputRef} value={inputValue} onChange={handleInputChange} /\u003e\n  );\n};\n```\n\n## Examples\n\nExplore our [examples directory on GitHub](./examples) for full implementation examples.\n\n### Examples Overview\n\n- [Basic Google Map](./examples/basic-google-map)\n- [Google Map with Markers](./examples/google-map-with-markers)\n- [Multiple Google Maps](./examples/multiple-google-maps)\n- [Directions Service](./examples/directions-service)\n- [Distance Matrix Service](./examples/distance-matrix-service)\n- [Elevation Service](./examples/elevation-service)\n- [Geocoding Service](./examples/geocoding-service)\n- [Maximum Zoom Imagery Service](./examples/max-zoom-service)\n- [Places Autocomplete Service](./examples/places-autocomplete-service)\n- [Places Autocomplete Widget](./examples/places-autocomplete-widget)\n- [Places Service](./examples/places-service)\n- [Places Service With Element](./examples/places-service-with-element)\n- [Street View Panorama Map](./examples/street-view-panorama-map)\n- [Street View Panorama With Element](./examples/street-view-panorama-with-element)\n\n## Development (only for Maintainers)\n\n### Contribution\n\nWe are happy about your contribution. Please checkout the following guide to get started:\n[Contribution Guide](./CONTRIBUTING.md).\n\nAlso, make sure to follow our [Coding Conventions](./CONVENTIONS.md) when making commits.\n\n### Quick Start\n\nClone the repository and run\n\n```sh\nnpm install\n```\n\nin the project root to install all dependencies.\n\nTo develop the Google Maps React Hooks library, start the project locally with\n\n```sh\nnpm run start:library\n```\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fubilabs%2Fgoogle-maps-react-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fubilabs%2Fgoogle-maps-react-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fubilabs%2Fgoogle-maps-react-hooks/lists"}