🚀🗺️ Strapi Google Maps

A Strapi plugin allowing you to implement a Google Maps custom field into your content-types, which can be used to pick and retrieve locations.

✨ Usage

The API response of a Strapi content-type implementing this google-maps custom field could look as follows:

1{
2  "data": {
3    "id": 16,
4    "attributes": {
5      "location": {
6        "coordinates": {
7          "lat": 51.5164315,
8          "lng": 7.455616999999997
9        },
10        "geohash": "u1jm1dm0bqyu"
11      }
12    }
13  },
14  "meta": {}
15}

You can configure this plugin inside your Strapi dashboard's settings tab (e.g. to enter your API key).

❗ Requirements

• Strapi v4
• To use the plugin without restrictions, you should consider getting an API key for the Google Maps Platform, with additional access to the Places API.

🔧 Installation

You just need to install the strapi-google-maps package via npm, at the root of your strapi project.

npm i @amicaldo/strapi-google-maps

# IMPORTANT: For Strapi versions before 4.11.0 install an older version instead:
npm i @amicaldo/strapi-google-maps@1.0.4

To make Google Maps work, you should take a look at the next section.

After restarting your Strapi app, Google Maps should be listed as one of your plugins.

🚀 Strapi Configuration (required)

Allow all Google Maps assets to be loaded correctly by customizing the strapi::security middleware inside ./config/middlewares.js.

Instead of:

1export default [
2  // ...
3  'strapi::security',
4  // ...
5];

Write:

1export default [
2  // ...
3  {
4    name: 'strapi::security',
5    config: {
6      contentSecurityPolicy: {
7        useDefaults: true,
8        directives: {
9          'connect-src': ["'self'", 'https:'],
10          'script-src': ["'self'", 'unsafe-inline', 'https://maps.googleapis.com'],
11          'media-src': [
12            "'self'",
13            'blob:',
14            'data:',
15            'https://maps.gstatic.com',
16            'https://maps.googleapis.com',
17          ],
18          'img-src': [
19            "'self'",
20            'blob:',
21            'data:',
22            'https://maps.gstatic.com',
23            'https://maps.googleapis.com',
24            'khmdb0.google.com',
25            'khmdb0.googleapis.com',
26            'khmdb1.google.com',
27            'khmdb1.googleapis.com',
28            'khm.google.com',
29            'khm.googleapis.com',
30            'khm0.google.com',
31            'khm0.googleapis.com',
32            'khm1.google.com',
33            'khm1.googleapis.com',
34            'khms0.google.com',
35            'khms0.googleapis.com',
36            'khms1.google.com',
37            'khms1.googleapis.com',
38            'khms2.google.com',
39            'khms2.googleapis.com',
40            'khms3.google.com',
41            'khms3.googleapis.com',
42            'streetviewpixels-pa.googleapis.com',
43            'market-assets.strapi.io',
44          ],
45        },
46      },
47    },
48  },
49  // ...
50];

👨‍💻 Manual Installation (not recommended)

Navigate into your Strapi's plugins folder and clone this repository. Then navigate into this plugin's directory.

cd ./src/plugins
git clone https://github.com/amicaldo/strapi-google-maps.git
cd ./strapi-google-maps

Install the dependencies using npm and compile the server side part.

npm install
npm run build

From your project's root directory, enable the plugin inside ./config/plugins.js.

1module.exports = {
2  // ...
3  'google-maps': {
4    enabled: true,
5    resolve: './src/plugins/strapi-google-maps',
6  },
7  // ...
8};

To make Google Maps work, you should take a look at the previous section.

Lastly, recompile the admin panel of your Strapi project.

npm run build