• Product

  • Solutions

  • Developers

  • Docs

  • Pricing

  • Cloud

Search icon
Strapi plugin logo for Location Field

Location Field

This custom field allows you to add locations to any content-type. Simply begin typing your locations and select it from an autocomplete dropdown list. The autocomplete functionality is powered by the Google Places API, which requires an API key.

thumbnail for Location Field

Strapi Location Field Plugin

This is a plugin for Strapi that adds a custom location field. Simply type in a location and select it from an autocomplete dropdown list. The autocomplete functionality is powered by the Google Places API, which requires an API key.

Strapi Interface

image

API Response

image

Installation

To install this package, run the following command in an existing strapi project:

npm install strapi-location-field-plugin

Usage

To enable the plugin, you'll need to include the following code in your Strapi project, in the /config/plugins.js file:

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  "location-field": {
    enabled: true,
    config: {
      fields: ["photo", "rating"], // optional
      // You need to enable "Autocomplete API" and "Places API" in your Google Cloud Console
      googleMapsApiKey: env("GOOGLE_MAPS_API_KEY"),
      // See https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest
      autocompletionRequestOptions: {},
    },
  },
  // .. your other plugin configurations
};

Note: the config.fields value can be set to an array of options (strings) containing any fields you'd like to be returned. The options that Google allows can be found here or in the screenshot below. When set, the information relevant to those specific fields will be accessible in the API response under the "details" key. The geometry field is always enabled.

image

ℹ️ Please note: some fields may not return the expected response. Currently only the photo, rating, and geometry fields have been tested.

autocompletionRequestOptions allows you to customize the search behavior by overriding the options used when autocompletion requests are made. The Autocomplete API documentation lists all the available options. For example, this configuration returns autocomplete results in Spanish and biases the search closer to the caller's IP address:

1
2
3
4
5
6
7
8
9
{
  config: {
    googleMapsApiKey: env("GOOGLE_MAPS_API_KEY"),
    autocompletionRequestOptions: {
      language: 'es',
      locationBias: 'IP_BIAS',
    },
  },
}

You'll also need to modify the /config/middlewares.js file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = [
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        directives: { "script-src": ["'self'", "'unsafe-inline'", "maps.googleapis.com"] },
      },
    },
  },
  "strapi::cors",
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::session",
  "strapi::favicon",
  "strapi::public",
];

Additional Information

  • This plugin is not affiliated with Google in any way.
  • This plugin is still in early development and may not be production-ready

Install now

npm install strapi-location-field-plugin

STATS

18 GitHub stars238 weekly downloads

Last updated

327 days ago

Strapi Version

4.0.0 and above

Author

github profile image for Ray Keating
Ray Keating

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.