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:

module.exports = ({ env }) => ({
  // ... other plugin configurations
  'sbp-google-map-field': {
    enabled: true,
    config: {
      apiKey: env('GOOGLE_MAPS_API_KEY'),
    }
  },
});

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

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

module.exports = [
  // ... other middlewares
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'script-src': ["'self'", "'unsafe-inline'", 'https://maps.googleapis.com'],
          'img-src': ["'self'", 'data:', 'blob:', 'https://maps.googleapis.com', 'https://maps.gstatic.com'],
        },
      },
    },
  },
  // ... other middlewares
];

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:

{
  "lat": 13.701951,
  "lng": 100.349673
}