aabosham/filament-google-maps-marker

A Filament Field to get coordinates based on Google Maps

v3.0.0 2023-08-09 10:07 UTC

This package is auto-updated.

Last update: 2024-03-09 11:41:25 UTC


README

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

A Filament Field to get coordinates based on Google Maps.

Fork of Filament Google Maps Picker

Installation

You can install the package via composer:

composer require aabosham/filament-google-maps-marker

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-marker-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-marker-views"

Usage

On your filament resource file

use AAbosham\FilamentGoogleMapsMarker\Forms\Components\GoogleMapsMarker;

On your filament form schema

        GoogleMapsMarker::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.

Example 1

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

        GoogleMapsMarker::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

Example 2

Testing

composer test

Changelog

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

Credits

License

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