A simple map input for react-admin that uses react-google-maps to set & show points on map.
Using npm: npm i @fusionworks/ra-google-maps-input
Using yarn: yarn add @fusionworks/ra-google-maps-input
import { Edit, SimpleForm, TextInput } from 'react-admin';
// import GMapInput component
import { GMapInput } from '@fusionworks/ra-google-maps-input';
// use GMapInput in Edit form
export const EntityEdit = props => (
<Edit {...props}>
<SimpleForm>
<TextInput source="id" />
<TextInput source="name" />
<GMapInput
source="coordinates"
googleKey="<YOUR_GOOGLE_APP_KEY>"
/>
</SimpleForm>
</Edit>
);
You can also use that component to work also with multiple markers on map:
import { Edit, SimpleForm, TextInput } from 'react-admin';
// import GMapInput component
import { GMapInput } from '@fusionworks/ra-google-maps-input';
// use GMapInput in Edit form with "multipleMarkers" prop
export const EntityEdit = props => (
<Edit {...props}>
<SimpleForm>
<TextInput source="id" />
<TextInput source="name" />
<GMapInput
source="coordinates"
multipleMarkers
googleKey="<YOUR_GOOGLE_APP_KEY>"
/>
</SimpleForm>
</Edit>
);
That component provides a prop that allows to use a search input to search for a specific location on map, and to put a marker on that location
import { Edit, SimpleForm, TextInput } from 'react-admin';
// import GMapInput component
import { GMapInput } from '@fusionworks/ra-google-maps-input';
// use GMapInput in Edit form with "searchable" prop
export const EntityEdit = props => (
<Edit {...props}>
<SimpleForm>
<TextInput source="id" />
<TextInput source="name" />
<GMapInput
source="coordinates"
searchable
googleKey="<YOUR_GOOGLE_APP_KEY>"
/>
</SimpleForm>
</Edit>
);
Also, there exists an Field component, that can be used in Show Views
import { Show, SimpleShowLayout, TextField } from 'ra-google-maps-input';
/// import GMapField component
import { GMapField } from 'ra-google-maps-input';
// use GMapField component in show View
export const ShowEntity = props => (
<Show {...props}>
<SimpleShowLayout>
<TextField source="id" />
<TextField source="name" />
<GMapField
source="coordinates"
googleKey="<YOUR_GOOGLE_APP_KEY>"
/>
</SimpleShowLayout>
</Show>
);
Prop | Type | Description | Default |
---|---|---|---|
googleKey | string | the google aplication key for your map | |
source | string | source field in your resource model | |
multipleMarkers | boolean | source field in your resource model | false |
searchable | boolean | adds a search input to your map | false |
For GMapField
ar aveilable just source and googleKey props
You can find an example of react-admin aplication that uses @fusionworks/ra-google-maps-input
in /example
directory of component github repository
To run this example you need to: clone the repository, navigate in example folder, install dependencies, and run the app.
-
git clone git@github.com:FusionWorks/react-admin-google-maps.git && cd react-admin-google-maps
-
cd example
-
npm i
oryarn
-
npm start
oryarn start