https://github.com/kashaudhan/react-gmap-picker
React google maps location picker/marker (latitude, longitude)
https://github.com/kashaudhan/react-gmap-picker
googe-map map-marker react
Last synced: 6 months ago
JSON representation
React google maps location picker/marker (latitude, longitude)
- Host: GitHub
- URL: https://github.com/kashaudhan/react-gmap-picker
- Owner: kashaudhan
- License: mit
- Created: 2023-06-04T06:43:45.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-01T17:57:04.000Z (about 2 years ago)
- Last Synced: 2025-08-09T14:29:14.299Z (11 months ago)
- Topics: googe-map, map-marker, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-gmap-picker
- Size: 3.92 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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 (
Reset Location
Latitude:
Longitude:
Zoom:
Map 1 (roadmap)
);
};
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. |