react-places-map

Using Google Maps to display multiple places

Usage no npm install needed!

<script type="module">
  import reactPlacesMap from 'https://cdn.skypack.dev/react-places-map';
</script>

README

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

License

MIT