Strapi plugin logo for Google map picker

Google map picker

A simple plugin to add a point to the map, with the @react-google-maps/api package

Logo - google map picker

Strapi v4 - google map picker

A simple plugin to add a point to the map, with the @react-google-maps/api package

Logo - google map picker

🗿 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

Logo - google map picker

Install now

npm install strapi-plugin-google-map-picker

STATS

10 GitHub stars4 weekly downloads

Last updated

864 days ago

Strapi Version

4.4.0 and above

Author

github profile image for Yuriy Repin
Yuriy Repin

Useful links

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.