Google maps integration with forest admin

[Hemang_Rathod]

Feature(s) impacted

Observed behavior

I’m currently working on integrating Google Maps into Forest Admin and followed the documentation that suggests using the "map" widget to display maps within the UI. I’ve ensured that:

• The location_map field is configured with valid lat and lng values.
• A valid Google Maps API key (from Google Cloud Console) has been added.
• The field is set up using the map widget as per the recommended configuration.

However, despite these steps, the map is not rendering in the Forest Admin UI. Additionally, the "map" widget type does not appear as an available option for my location field in the interface.

I’ve attached a screenshot for reference and below is the configuration snippet I’m currently using:

js

CopyEdit

{
  name: 'Update Location',
  type: 'single',
  httpMethod: 'POST',
  endpoint: '/forest/actions/update-location',
  fields: [
    { field: 'latitude', type: 'Number', isRequired: true },
    { field: 'longitude', type: 'Number', isRequired: true },
    { field: 'address', type: 'String', isRequired: true },
    { field: 'city', type: 'String', isRequired: true },
    { field: 'state', type: 'String', isRequired: true },
    { field: 'postalCode', type: 'String', isRequired: true },
  ],
},
fields: [
  {
    field: 'location_map',
    type: 'Json',
    isReadOnly: true,
    widget: 'map',
    widgetAttributes: {
      apiKey: 'AIzaSyD0FcYIKb-xTGI3juUaqxreSwS0wYAQoNg',
      defaultZoom: 12,
      defaultCenter: { lat: 39.5501, lng: -105.7821 }, // Default to Colorado, USA
    },
    get: (record) => {
      if (!record.locations || !record.locations[0]) return null;
      const location = record.locations[0];
      return {
        lat: location.latitude,
        lng: location.longitude,
        address: location.address,
      };
    },
  },
]

Could you please help me understand why the map isn’t rendering and whether this could be related to the Forest Admin package version?

Please check the attached screenshot

Expected behavior

Not able to see the Google maps in Forest Dashboard

Failure Logs

Context

• Project name: …
• Team name: …
• Environment name: …
• Database type: …
• Recent changes made on your end if any: …

And, if you are self-hosting your agent:

• Agent technology: (nodejs, expressjs)
• Agent forest package name (“forest-express-sequelize”: “^9.3.28”) & forest version 16.18.1
  (from your .lock file): …

[Enki]

Hi @Hemang_Rathod , welcome to the community forum !

From what I understand, your location field is a JSON field, but the map display widget needs a string at this format: 48.8566, 2.3522
You can define a smart field from your location_map field to build the required string, and use it to display the widget.

best regards

[Hemang_Rathod]

Hi ,

I have updated my field from JSON to 48.8566, 2.3522 , and I am also defining the smart field but I am not able to find map display widget in Forest admin UI.
Can you please tell me where I can find it in the Forest Admin UI?

[Enki]

Go in editor mode and in your collection settings, go to the fields tab, then scroll to display settings, you should find the map widget here: