# react-location-picker

> A react component to pick a location using google maps

Latest version **2.0.0** (published 2026-03-18) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 55/100 (C)** — status: stable.

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

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-03-18 |
| First published | 2017-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 17.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ramesh Syangtan |
| Maintainers | rameshsyn |

## Links

- npm: https://www.npmjs.com/package/react-location-picker
- npm.io page: https://npm.io/package/react-location-picker

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [@react-google-maps/api](https://npm.io/package/@react-google-maps/api.md) ^2.19.3

## Recent versions

- 2.0.0 (latest) — 2026-03-18
- 1.5.0 — 2019-09-28
- 1.4.0 — 2019-09-08
- 1.3.0 — 2018-07-27
- 1.2.4 — 2018-05-26
- 1.1.4 — 2018-05-25
- 1.1.3 — 2018-05-22
- 1.1.2 — 2018-03-27
- 1.1.1 — 2018-03-27
- 1.0.1 — 2017-09-17
- 1.0.0 — 2017-09-17

## README

# react-location-picker
> A react component to pick a location using google maps.

[Demo](https://react-location-picker.netlify.com/)

### Installation

```bash
npm install react-location-picker --save
```

This package now requires `@react-google-maps/api` as it is built on top of it.

### Google Maps API

You need to load the Google Maps JavaScript API. We recommend using the `LoadScript` component from `@react-google-maps/api`.

```jsx
import { LoadScript } from '@react-google-maps/api';

const libraries = ['geometry', 'drawing', 'places'];

<LoadScript
  googleMapsApiKey="YOUR_API_KEY_HERE"
  libraries={libraries}
>
  <YourApp />
</LoadScript>
```

Alternatively, you can include the script tag in your HTML:
```html
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=geometry,drawing,places"></script>
```

### Example

```jsx
import React, { useState } from 'react';
import LocationPicker from 'react-location-picker';

const defaultPosition = {
  lat: 27.9878,
  lng: 86.9250
};

const LocationPickerExample = () => {
  const [address, setAddress] = useState("Kala Pattar Ascent Trail, Khumjung 56000, Nepal");
  const [position, setPosition] = useState(defaultPosition);

  const handleLocationChange = ({ position, address }) => {
    // Set new location
    setPosition(position);
    setAddress(address);
  };

  return (
    <div>
      <h1>{address}</h1>
      <div>
        <LocationPicker
          defaultPosition={defaultPosition}
          onChange={handleLocationChange}
          mapContainerStyle={{ height: '400px', width: '100%' }}
        />
      </div>
    </div>
  );
};

export default LocationPickerExample;
```

### Usage

#### LocationPicker Properties

| Property | Type | Description |
| :--- | :--- | :--- |
| `onChange` | `function` | **Required**. A callback which gets called on every map marker position change. It passes an object containing `position`, `address`, and `places`. |
| `defaultPosition` | `object` | **Required**. An object with `lat` and `lng` properties representing the initial map center and marker position. |
| `zoom` | `number` | *Optional*. Map zoom level. Default is `10`. |
| `radius` | `number` | *Optional*. Circle radius in meters. Pass `-1` to hide the circle. Default is `1000`. |
| `circleOptions` | `object` | *Optional*. [CircleOptions](https://developers.google.com/maps/documentation/javascript/reference/polygon#CircleOptions) for the radius circle. |
| `mapContainerStyle` | `object` | *Optional*. Style object for the map container. Default is `{ height: '400px', width: '100%' }`. |

### Development

For demo, clone this repo and run:

1. Install all dependencies:
   ```bash
   npm install
   ```

2. Start the development server:
   ```bash
   npm start
   ```

3. Open `http://localhost:8080` in your browser.

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