# react-gmap-picker

> React google maps location picker/marker with `Advanced Marker`

Latest version **1.0.3** (published 2024-04-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-gmap-picker
pnpm add react-gmap-picker
yarn add react-gmap-picker
bun add react-gmap-picker
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2024-04-30 |
| First published | 2023-06-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 81.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | kashaudhan |
| Maintainers | kashaudhan |
| Keywords | react, google, google-maps, google-maps-marker, maps-marker, marker |

## Links

- npm: https://www.npmjs.com/package/react-gmap-picker
- Repository: https://github.com/kashaudhan/react-gmap-picker
- Issues: https://github.com/kashaudhan/react-gmap-picker/issues
- npm.io page: https://npm.io/package/react-gmap-picker

## Dependencies (1)

- [@googlemaps/js-api-loader](https://npm.io/package/@googlemaps/js-api-loader.md) ^1.16.6

## 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.3 (latest) — 2024-04-30
- 1.0.2 — 2024-04-29
- 1.0.1 — 2024-04-29
- 0.3.2 — 2023-06-15
- 0.3.1 — 2023-06-15
- 0.2.2 — 2023-06-15
- 0.1.2 — 2023-06-04
- 0.1.1 — 2023-06-04
- 0.1.0 — 2023-06-04

## README

# react-gmap-picker

React google maps location picker/marker with `Advanced Marker`


## Table of Contents

- [react-gmap-picker](#react-gmap-picker)
  - [Table of Contents](#table-of-contents)
  - [Installation](#installation)
  - [Usage/Examples](#usageexamples)
  - [Props](#props)

## Installation


Install react-gmap-picker and its dependeices
```sh
npm install --save react-gmap-picker
```
or
```sh
yarn add react-gmap-picker
```
## Usage/Examples

```jsx
import { useState } from 'react';
import { Picker } from 'react-gmap-picker';
import React from 'react';

const INITIAL_LOCATION = { lat: 13.4, lng: 77.0 };
const INITIAL_ZOOM = 10;

const API_KEY = process.env.API_KEY as string;

const App = () => {
  const [defaultLocation, setDefaultLocation] = useState(INITIAL_LOCATION);
  const [location, setLocation] = useState(defaultLocation);
  const [zoom, setZoom] = useState(INITIAL_ZOOM);

  const handleChangeLocation = (lat: number, lng: number) => {
    setLocation({ lat, lng });
  };

  const handleChangeZoom = (newZoom: number) => {
    setZoom(newZoom);
  };

  const handleResetLocation = () => {
    setDefaultLocation({ ...INITIAL_LOCATION });
    setLocation({ ...INITIAL_LOCATION });
    setZoom(INITIAL_ZOOM);
  };

  return (
    <div>
      <button onClick={handleResetLocation}>Reset Location</button>
      <label>Latitude:</label>
      <input type="text" value={location.lat} disabled />
      <label>Longitude:</label>
      <input type="text" value={location.lng} disabled />
      <label>Zoom:</label>
      <input type="text" value={zoom} disabled />

      <div>
        <h4>Map 1 (roadmap)</h4>
        <Picker
          defaultLocation={defaultLocation}
          zoom={zoom}
          mapTypeId="roadmap"
          style={{ height: '700px' }}
          onChangeLocation={handleChangeLocation}
          onChangeZoom={handleChangeZoom}
          apiKey={API_KEY}
        />
      </div>
    </div>
  );
};

export default App;
```


## Props

| Parameter | Type     | Default  | Description                |
| :-------- | :------- | ---------| :------------------------- |
| `apiKey` | `string` | **Required** | **Required**. Google maps API key |
| `defaultLocation` | `{lat: number; lng: number}` |  **Required** |  **Required**. Default coordinate. |
| `zoom` | `{lat: number; lng: number}` | 7 | Default coordinate. |
| `onChangeLocation` | `(lat: number, lng: number) => void` | null | Executes when location changes. |
| `onChangeZoom` | `(zoom: number) => void` | null | Executes when room level changes. |
| `style` | `any` | { width: '100%', height: '600px' } | Map container style. |
| `className` | `string` | undefined | Map className. |
| `mapTypeId` | [google.maps.MapTypeId](https://developers.google.com/maps/documentation/javascript/maptypes) | undefined | Map type you want to see. |

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