Strapi plugin logo for Google Maps

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.

thumbnail for Google Maps

🚀🗺️ Strapi Google Maps

Preview

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
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "data": {
    "id": 16,
    "attributes": {
      "location": {
        "coordinates": {
          "lat": 51.5164315,
          "lng": 7.455616999999997
        },
        "geohash": "u1jm1dm0bqyu"
      }
    }
  },
  "meta": {}
}

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

Configuration

❗ 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:

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

Write:

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

👨‍💻 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.

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

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

Install now

npm install @amicaldo/strapi-google-maps

STATS

11 GitHub stars540 weekly downloads

Last updated

117 days ago

Strapi Version

4.11.0 and above

Author

github profile image for amicaldo GmbH
amicaldo GmbH

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.