react-location-picker

A react component to pick a location using google maps.

Demo

Installation

1npm install react-location-picker --save

or

1yarn add react-location-picker --save

You need to include google map script in your page.
<script src="https://maps.googleapis.com/maps/api/js?key=<INSERT_API_KEY_HERE>&v=3.exp&libraries=geometry,drawing,places"></script>

Example

1import React, { Component } from 'react';
2import LocationPicker from 'react-location-picker';
3
4/* Default position */
5const defaultPosition = {
6  lat: 27.9878,
7  lng: 86.9250
8};
9
10
11class LocationPickerExample extends Component {
12  constructor (props) {
13    super(props);
14
15    this.state = {
16      address: "Kala Pattar Ascent Trail, Khumjung 56000, Nepal",
17      position: {
18         lat: 0,
19         lng: 0
20      }
21    };
22
23    // Bind
24    this.handleLocationChange = this.handleLocationChange.bind(this);
25  }
26
27  handleLocationChange ({ position, address, places }) {
28
29    // Set new location
30    this.setState({ position, address });
31  }
32
33  render () {
34    return (
35      <div>
36        <h1>{this.state.address}</h1>
37        <div>
38          <LocationPicker
39            containerElement={ <div style={ {height: '100%'} } /> }
40            mapElement={ <div style={ {height: '400px'} } /> }
41            defaultPosition={defaultPosition}
42            onChange={this.handleLocationChange}
43          />
44        </div>
45      </div>
46    )
47  }
48}

Usage

LocationPicker properties

Property	Type	Description
containerElement	node	required, A container element for map element
mapElement	node	required, A map element
onChange	function	required, A callback which gets called on every map marker position change, it is passed with one argument of type object which has location information.
defaultPosition	object	required, A default position for map center.
zoom	number	optional, Map zoom level
radius	number	optional, Circle radius in meter. or Pass -1 to hide it.
circleOptions	object	optional, https://developers.google.com/maps/documentation/javascript/3.exp/reference#CircleOptions

Development

For demo, clone this repo and run

Install all dependencies
yarn

Start
yarn start

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