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