Google Map Field By Strapi Backend Pack

sbp-google-map-field is a Strapi plugin that provides a custom field for selecting a location on Google Maps. It allows content editors to easily pick a location via an interactive map with a draggable marker, and automatically updates the latitude and longitude values. This plugin is built using The Strapi Design System to ensure a consistent UI and can be installed via npm or yarn.

Features

• Interactive Google Map: Displays an embedded Google Map with a draggable marker.
• Real-Time Coordinates: Automatically updates latitude and longitude values as the marker is moved.
• Current Location: Includes a button to fetch the user's current location using the Geolocation API.
• Custom Field Integration: Easily integrates as a custom field in Strapi’s Content-Type Builder and Content Manager.
• Configurable API Key: Supports setting the Google Maps API key via plugin configuration.
• Built with The Strapi Design System: Ensures a consistent admin UI.

Compatibility

This plugin is compatible with Strapi version 5 and above.

Installation

This plugin is published as an npm package and can be installed via either npm or yarn.

Using npm

npm install sbp-google-map-field

Using yarn

yarn add sbp-google-map-field

After installation, ensure that the plugin is linked in your Strapi project by adding it to your config/plugins.js.

Configuration

Plugin Configuration

In your config/plugins.js, add the following configuration:

1module.exports = ({ env }) => ({
2  // ... other plugin configurations
3  'sbp-google-map-field': {
4    enabled: true,
5    config: {
6      apiKey: env('GOOGLE_MAPS_API_KEY'),
7    }
8  },
9});

Then, in your .env file, define your Google Maps API key:

1GOOGLE_MAPS_API_KEY=YOUR_GOOGLE_MAPS_API_KEY

Update Content Security Policy

Make sure your config/middlewares.js allows loading external scripts and images from Google Maps:

1module.exports = [
2  // ... other middlewares
3  {
4    name: 'strapi::security',
5    config: {
6      contentSecurityPolicy: {
7        useDefaults: true,
8        directives: {
9          'script-src': ["'self'", "'unsafe-inline'", 'https://maps.googleapis.com'],
10          'img-src': ["'self'", 'data:', 'blob:', 'https://maps.googleapis.com', 'https://maps.gstatic.com'],
11        },
12      },
13    },
14  },
15  // ... other middlewares
16];

Usage

Once installed and configured, you can add the Google Map custom field to any content type through the Content-Type Builder. When editing an entry, editors will see:

• An interactive Google Map with a draggable marker.
• A "Get current location" button that auto-fills the coordinates using the browser's Geolocation API.
• Input fields for manually editing the latitude and longitude values.

The custom field value is stored as a JSON object in the following format:

1{
2  "lat": 13.701951,
3  "lng": 100.349673
4}