Map Input - Javaabu Forms

The Map Input component provides an interactive Google Maps interface for selecting geographic locations, drawing radius circles, and defining polygon boundaries.

Prerequisites

Google Maps API Key

Set your Google Maps API key in the environment file:

MAP_API_KEY=your_google_maps_api_key_here

The key is automatically loaded from config/forms.php:

'map_api_key' => env('MAP_API_KEY'),

Geospatial Package (Optional)

For Point and Polygon model casting, install the recommended package:

composer require javaabu/geospatial

The component supports matanyadaev/laravel-eloquent-spatial Point and Polygon objects.

Basic Usage

Coordinate Selection

<x-forms::map-input
    name="location"
    label="Venue Location"
/>

With Model Binding

<x-forms::map-input
    name="location"
    label="Delivery Location"
    :model="$order"
    lat-name="latitude"
    lng-name="longitude"
/>

Component Attributes

Core Attributes

name

string

required

The input field name

label

string

default:""

Label text displayed above the map

model

mixed

default:"null"

Model instance for automatic value binding

Field Names

latName

string

default:"lat"

Name attribute for the latitude input field

lngName

string

default:"lng"

Name attribute for the longitude input field

radiusName

string

default:"radius"

Name attribute for the radius input field

polygonName

string

default:"boundary"

Name attribute for the polygon boundary field

Feature Flags

enableCoordinates

boolean

default:"true"

Enable latitude/longitude marker selection

enableRadius

boolean

default:"false"

Enable radius circle drawing (delivery zones, etc.)

enablePolygon

boolean

default:"false"

Enable polygon boundary drawing

hideInputs

boolean

default:"false"

Hide coordinate/radius/polygon input fields (uses hidden inputs)

disabled

boolean

default:"false"

Disable map interaction and input fields

Values

lat

float

default:"null"

Initial latitude value

lng

float

default:"null"

Initial longitude value

radius

float

default:"null"

Initial radius value

polygon

string

default:"null"

Initial polygon WKT string

Default Values

defaultLat

float

default:"null"

Default latitude when no value exists

defaultLng

float

default:"null"

Default longitude when no value exists

defaultRadius

float

default:"null"

Default radius when no value exists

defaultPolygon

string

default:"null"

Default polygon WKT when no value exists

Map Center

defaultMapCenterLat

float

default:"null"

Map center latitude (falls back to get_setting('default_lat'))

defaultMapCenterLng

float

default:"null"

Map center longitude (falls back to get_setting('default_lng'))

Radius Configuration

radiusPrecision

integer

default:"0"

Number of decimal places for radius input

maxRadius

integer

default:"6371000"

Maximum allowed radius (Earth’s radius in meters)

radiusUnit

string

default:"m"

Unit display for radius (m for meters, km for kilometers)

Layout Attributes

showErrors

boolean

default:"true"

Display validation errors

showLabel

boolean

default:"true"

Show or hide the label

required

boolean

default:"false"

Mark field as required

inline

boolean

default:"false"

Display label and input inline

inlineLabelClass

string

default:""

Additional CSS classes for inline label

inlineInputClass

string

default:""

Additional CSS classes for inline input wrapper

showJsErrors

boolean

default:"false"

Enable JavaScript validation error display

framework

string

default:""

CSS framework override (bootstrap-5, material-admin-26)

Examples

Simple Location Picker

<x-forms::map-input
    name="venue_location"
    label="Venue Location"
    lat-name="venue_lat"
    lng-name="venue_lng"
    :model="$venue"
/>

Delivery Zone with Radius

<x-forms::map-input
    name="delivery_zone"
    label="Delivery Coverage Area"
    :enable-coordinates="true"
    :enable-radius="true"
    radius-name="delivery_radius"
    radius-unit="km"
    :max-radius="50000"
    :radius-precision="1"
    :model="$restaurant"
/>

Polygon Boundary

<x-forms::map-input
    name="service_area"
    label="Service Area Boundary"
    :enable-polygon="true"
    polygon-name="service_boundary"
    :model="$region"
/>

Hidden Inputs Mode

<x-forms::map-input
    name="coordinates"
    label="Select Location on Map"
    :hide-inputs="true"
    :model="$location"
/>

Read-Only Map Display

<x-forms::map-input
    name="location"
    label="Current Location"
    :model="$delivery"
    :disabled="true"
/>

Custom Map Center

<x-forms::map-input
    name="location"
    label="Office Location"
    :default-map-center-lat="4.1755"
    :default-map-center-lng="73.5093"
    :model="$office"
/>

Eloquent Spatial Integration

The component automatically handles Point and Polygon objects from the eloquent-spatial package.

Point Casting

use MatanYadaev\EloquentSpatial\Objects\Point;

class Venue extends Model
{
    protected $fillable = ['name', 'location'];
    
    protected $casts = [
        'location' => Point::class,
    ];
}

<x-forms::map-input
    name="location"
    label="Venue Location"
    :model="$venue"
/>

The component automatically extracts latitude and longitude from the Point object.

Polygon Casting

use MatanYadaev\EloquentSpatial\Objects\Polygon;

class Region extends Model
{
    protected $fillable = ['name', 'boundary'];
    
    protected $casts = [
        'boundary' => Polygon::class,
    ];
}

<x-forms::map-input
    name="boundary"
    label="Region Boundary"
    :enable-polygon="true"
    polygon-name="boundary"
    :model="$region"
/>

The component converts Polygon objects to WKT (Well-Known Text) format.

Google Maps Integration

The component automatically loads the Google Maps JavaScript API when rendered:

{{-- Automatically included via @pushonce --}}
<script>
    (g=>{...})({key: 'YOUR_API_KEY', v: 'weekly'});
</script>

The script is pushed to the stack defined in config/forms.php (scripts_stack).

Map Features

Search Functionality

The map includes a built-in search box for location lookup:

<input class="map-selector-search" type="text" placeholder="Search location..." />

Data Attributes

The map container uses these data attributes for JavaScript initialization:

data-map-selector="true" - Identifies the map container
data-lat - Initial center latitude
data-lng - Initial center longitude
data-enable-marker - Enable coordinate marker
data-disabled - Disable map interaction
data-enable-radius - Enable radius circle
data-enable-polygon - Enable polygon drawing

CSS Classes

Key CSS classes for styling:

.map-selector-map - Map container element
.map-selector-search - Search input element
.map-selector-lat - Latitude input element
.map-selector-lng - Longitude input element
.map-selector-radius - Radius input element
.map-selector-polygon - Polygon input element

Validation

Laravel Validation Rules

public function rules()
{
    return [
        'venue_lat' => ['required', 'numeric', 'min:-90', 'max:90'],
        'venue_lng' => ['required', 'numeric', 'min:-180', 'max:180'],
        'delivery_radius' => ['nullable', 'numeric', 'min:0'],
        'service_boundary' => ['nullable', 'string'],
    ];
}

Display Errors

<x-forms::map-input
    name="location"
    label="Location"
    :show-errors="true"
    required
/>

Notes

Requires a valid Google Maps API key in MAP_API_KEY environment variable
The component extends the base Input component with type="map-input"
Automatically extracts coordinates from Point objects when model binding
Converts Polygon objects to WKT format for textarea display
Falls back to get_setting('default_lat') and get_setting('default_lng') for map center
Radius step is calculated dynamically based on radiusPrecision
The Google Maps script is loaded once per page using @pushonce
Supports both visible inputs and hidden inputs mode
Compatible with Bootstrap 5 and Material Admin 26 frameworks

Getting Started

Core Concepts

Form Inputs

Date & Time Inputs

Selection Inputs

File Inputs

Location Inputs

Form Structure

Buttons & Actions

UI Components

Display Components

Utility Components

Advanced Features

Configuration

​Prerequisites

​Google Maps API Key

​Geospatial Package (Optional)

​Basic Usage

​Coordinate Selection

​With Model Binding

​Component Attributes

​Core Attributes

​Field Names

​Feature Flags

​Values

​Default Values

​Map Center

​Radius Configuration

​Layout Attributes

​Examples

​Simple Location Picker

​Delivery Zone with Radius

​Polygon Boundary

​Hidden Inputs Mode

​Read-Only Map Display

​Custom Map Center

​Eloquent Spatial Integration

​Point Casting

​Polygon Casting

​Google Maps Integration

​Map Features

​Search Functionality

​Data Attributes

​CSS Classes

​Validation

​Laravel Validation Rules

​Display Errors

​Notes

Build docs developers (and LLMs) love

Prerequisites

Google Maps API Key

Geospatial Package (Optional)

Basic Usage

Coordinate Selection

With Model Binding

Component Attributes

Core Attributes

Field Names

Feature Flags

Values

Default Values

Map Center

Radius Configuration

Layout Attributes

Examples

Simple Location Picker

Delivery Zone with Radius

Polygon Boundary

Hidden Inputs Mode

Read-Only Map Display

Custom Map Center

Eloquent Spatial Integration

Point Casting

Polygon Casting

Google Maps Integration

Map Features

Search Functionality

Data Attributes

CSS Classes

Validation

Laravel Validation Rules

Display Errors

Notes