React Places Map

Installation

Using npm

npm i react-places-map

Usage

import * as React from "react";
import * as Places from "react-places-map";
 
export class PlacesLayout extends React.Component {
    public render() {
        return (
            <Places.Controller
                apiKey="your api key"
                imagePath="/path/to/load/images"
                places={[
                    {
                        type: "placeType1",
                        getCoordinates: this.getCoordinates("placeType1"),
                    },
                    {
                        type: "placeType2",
                        getCoordinates: this.getCoordinates("placeType2"),
                    },
                ]}
            >
                <Places.SearchBox inputProps={{ placeholder: "Fill address" }} />
                <Places.Header type="placeType1">
                    Place type 1
                </Places.Header>
                <Places.Header type="placeType2">
                    Place type 2
                </Places.Header>
                <Places.Map />
            </Places.Controller>
        )
    }
 
    protected getCoordinates = (type: string) => () => {
        // You should return array of places (see Place interface)
        // You can load it asynchronously and return promise
        return {
            placeType1: [
                [50, 30],
                [50, 29],
                [51, 30],
            ],
            placeType2: [
                [61, 20],
                [51, 33],
                [53, 20]
            ],
        }[type];
    }
}

Places controller props

Property	Description	Required
apiKey	Your private api key to load google maps	true
imagePath	Path to access markers image (f.e. if you can access like http://domain/static/m1.png, you should return /static/m	true
places	Array of Place values - coordinates of markers	true

Search box props

Property	Description	Required
inputProps	Custom props to rendered input	false
classNames	Object with class names to children (root, input, autocompleteContainer)	false

Header props

Property	Description	Required
type	Selected place type which markers will be shown	true

Contributors

• Alexander Letnikow

License

MIT