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) => () => {
return {
placeType1: [
[50, 30],
[50, 29],
[51, 30],
],
placeType2: [
[61, 20],
[51, 33],
[53, 20]
],
}[type];
}
}