Filament Drawable Map provides two ready-to-use Filament form field components —Documentation Index
Fetch the complete documentation index at: https://mintlify.com/diegobas/filament-drawable-map/llms.txt
Use this file to discover all available pages before exploring further.
DrawableMap and ViewableMap — that embed Google Maps directly in your Filament admin forms. Use DrawableMap to let users interactively draw polygon zones, and ViewableMap to display one or more read-only polygons with tooltips and per-polygon color customization.
Installation
Install via Composer and publish the config file to get Google Maps working in minutes.
Quickstart
Add your first drawable map field to a Filament form with a working code example.
DrawableMap Component
Full reference for the interactive polygon-drawing field and all its configuration methods.
ViewableMap Component
Display multiple read-only polygons with titles, colors, and click-to-zoom behavior.
How It Works
Filament Drawable Map registers an Alpine.js component backed by the Google Maps JavaScript API. TheDrawableMap field lets users hold Ctrl and click on the map to place polygon vertices; coordinates are synced back to Livewire as a JSON array of {lat, lng} objects. The ViewableMap field accepts pre-existing polygon data and renders it in a non-editable map view.
Install the package
Run
composer require diegobas/filament-drawable-map and publish the config file.Add your Google Maps API key
Set
GOOGLE_MAPS_API_KEY in your .env file. The key is loaded automatically by the service provider.Add the field to a Filament form
Use
DrawableMap::make('zone') in your form() schema to let users draw a polygon.Key Features
Interactive Drawing
Hold Ctrl and click to add vertices. Double-click a vertex to remove it. A built-in Clear button resets the zone.
Read-Only Viewer
Display multiple polygons with custom colors and hover tooltip titles on a non-editable map.
Dark Mode Support
Both components detect the Filament dark mode setting and apply matching Google Maps styles automatically.
Livewire State Sync
Polygon coordinates are kept in sync with Livewire state as a JSON array — no extra wiring required.