Google map picker
A simple plugin to add a point to the map, with the @react-google-maps/api package
Strapi v4 - google map picker
A simple plugin to add a point to the map, with the @react-google-maps/api package
🗿 How to install
1# yarn
2yarn add strapi-plugin-google-map-picker
3
4# npm
5npm i strapi-plugin-google-map-picker
🔧 Configuration
1. Add plugin in plugins.js
1// config/plugins.js
2...
3...
4"google-map-picker": {
5 config: {
6 apiKey: env("GOOGLE_PUBLIC_KEY"), // required
7 default_center: { lat: 54.106438, lng: 11.556940 }, // required
8 favorites_places: [
9 {
10 title: "Berlin",
11 coordinates: { lat: 52.518536, lng: 52.518536 },
12 },
13 {
14 title: "Zurich",
15 coordinates: { lat: 47.384168, lng: 8.526831 },
16 },
17 {
18 title: "Oslo",
19 coordinates: { lat: 59.911002, lng: 10.756167},
20 },
21 ],
22 },
23},
24...
25...
2. Add "strapi::security" in middlewares.js
1// config/middlewares.ts
2...
3...
4'strapi::errors',
5{
6 name: "strapi::security",
7 config: {
8 contentSecurityPolicy: {
9 directives: {
10 "script-src": ["'self'", "maps.googleapis.com", "maps.gstatic.com"],
11 "img-src": ["'self'", "data:", "maps.googleapis.com", "maps.gstatic.com"],
12 },
13 },
14 },
15},
16'strapi::cors',
17...
18...
3. Add custom field
Install now
npm install strapi-plugin-google-map-picker
Create your own plugin
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.