Filament Google Maps Picker

A Filament Field to get coordinates based on Google Maps.

Installation

You can install the package via composer:

composer require emiliobravo/filament-google-maps-picker

You must define an environment variable GOOGLE_MAPS_API_KEY in your .env file with your Google Maps API Key

You can publish the config file with:

php artisan vendor:publish --tag="filament-google-maps-picker-config"

This is the contents of the published config file:

return [
    'google_maps_key' => env('GOOGLE_MAPS_API_KEY')
];

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-google-maps-picker-views"

Usage

On your filament resource file

use EmilioBravo\FilamentGoogleMapsPicker\Forms\Components\LocationPicker;

On your filament form schema

        LocationPicker::make('location')

This will display a simple Google Maps field with a marker in latitude 0 and longitude 0. When you click on the map, the field value and the marker positions uptades to the new coordinates.

Enabling Google Maps controls

Use this methods to enable Google Maps controls:

zoomControl(bool) (default: false) displays de zoom controls allow the user to change it

mapTypeControl(bool) (default: false) displays the map type selection control

scaleControl(bool) (default: false) displays the map scale control

streetViewControl(bool) (default: false) displays the map StreetView control

fullScreenControl(bool) (default: false) displays the full screen control

rotateControl(bool) (default: false) displays the rotation control

searchBoxControl(bool) (default: false) displays search box control to search for locations. Will update the field value upon selection

geolocationControl(bool) (default: false) custom control to get the device geolocation and update the map position with it. It required the user to allow the device permission to access geolocation data

coordsBoxControl(bool) (default: false) custom control that shows a text input with current value of the field in the format latitude,longitude

Options

zoom(int) (default: 1) takes an integer as value and sets the initial zoom of the map

minHeight(string) (default: 50vh) accepts a string to set the map height, must be a valid CSS min-height. Ex: 80vh, 30%, 50px

mapTypeId(string) (default: roadmap) accepts a string: roadmap,satellite,hybrid, terrain

searchBoxPlaceholderText(string) (default: Search Address) accepts a string to customize de search box placeholder text

locationButtonText(string) (default: My location) accepts a string to customize de location button text

fixMarkerOnCenter(bool) (default: false) when the user drags the map the marker pans to the center and updates the field value

default(array) (default: ['lat' => 0,'lng' => 0]) sets the default value

defaultToMyLocation(bool) (default: false) sets the default value to the current location

On your filament form schema

        LocationPicker::make('location')
            ->default(['lat' => 40.7587,'lng' => -73.9786])
            ->zoom(15)
            ->zoomControl()
            ->minHeight('60vh')
            ->mapTypeId('satellite')
            ->mapTypeControl()
            ->scaleControl()
            ->streetViewControl()
            ->fullScreenControl()
            ->rotateControl()
            ->searchBoxControl()
            ->searchBoxPlaceholderText('Type an address')
            ->geolocationControl()
            ->locationButtonText('Go to my location')
            ->defaultToMyLocation()
            ->coordsBoxControl()
            ->fixMarkerOnCenter()

This will display a map with all the available options

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Credits

• Luis Escobar Bravo
• All Contributors

License

The MIT License (MIT). Please see License File for more information.