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