# google-maps-hooks

> A library of hooks to integrate your React App with Google Maps API

Latest version **1.0.9** (published 2021-02-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install google-maps-hooks
pnpm add google-maps-hooks
yarn add google-maps-hooks
bun add google-maps-hooks
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2021-02-07 |
| First published | 2021-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 39.8 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Marco Aurelio C. dos Santos |
| Maintainers | santosmarco |
| Keywords | react, hooks, google, maps |

## Links

- npm: https://www.npmjs.com/package/google-maps-hooks
- Repository: https://github.com/santosmarco/google-maps-hooks
- Issues: https://github.com/santosmarco/google-maps-hooks/issues
- npm.io page: https://npm.io/package/google-maps-hooks

## Dependencies (2)

- [axios](https://npm.io/package/axios.md) ^0.21.1
- [react](https://npm.io/package/react.md) ^17.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2021-02-07
- 1.0.8 — 2021-02-06
- 1.0.7 — 2021-02-06
- 1.0.6 — 2021-02-06
- 1.0.5 — 2021-02-06
- 1.0.4 — 2021-02-06
- 1.0.3 — 2021-02-06
- 1.0.1 — 2021-02-06

## README

# Google Maps Hooks

_Google Maps Hooks_ is a utility library that exposes various React hooks that interact with the official Google Maps API.

---

## Installation

With Yarn:

```sh
yarn add google-maps-hooks
```

With NPM:

```sh
npm install --save google-maps-hooks
```

---

## Getting a Google Maps API Key

See: _<https://developers.google.com/maps/gmp-get-started#create-project>_

---

## API Quick Reference

### Hooks

- `useGeocoding`
- `useDirections`
- `useDistanceMatrix`
- `useGeolocation`
- `useElevation`
- `usePlaces`
- `usePlayableLocations`
- `useRoads`
- `useSemanticTile`
- `useStreetView`
- `useTimeZone`

### Components

- `GMapsProvider`

---

## Usage

1. Firstly, wrap your root component _(normally `App`)_ with `GMapsProvider` and pass it your Google Maps API Key.

   ```jsx
   import GMapsProvider from "google-maps-hooks";

   const App = () => {
    ...
   };

   const Root = () => (
    <GMapsProvider apiKey={YOUR_GOOGLE_MAPS_API_KEY}>
     <App />
    </GMapsProvider>
   );

   export default Root;
   ```

2. **And that's it!** You can now call any of the available hooks from anywhere in your application.

### Example

```jsx
import React, { useEffect } from "react";
import GMapsProvider, { useGeocoding } from "google-maps-hooks";

const App = () => {
  const geocoding = useGeocoding();

  useEffect(() => {
    geocoding.geocode("My home address").then((res) => console.log(res));
  }, [geocoding]);

  return <p>Example</p>;
};

const Root = () => (
  <GMapsProvider apiKey="AIzaSyAYjk3uc084G9YRkMfSbbfhA0atGZmbh_8">
    <App />
  </GMapsProvider>
);

export default Root;
```

---

## API Reference (Components)

### `GMapsProvider`

#### • Props

| Name     | Type        | Required | Default value |
| -------- | ----------- | -------- | ------------- |
| apiKey   | `string`    | **Yes**  | _None_        |
| children | `ReactNode` | No       | _None_        |

---

## API Reference (Hooks)

### `useGeocoding`

#### • Parameters

None

#### • Returns

An object containing only one method: `geocode`.

`geocode` takes an address (`string`) as its first argument and returns a `Promise` that resolves to an object containing the geocoded data.

---
_Source: https://npm.io/package/google-maps-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._