This package provides a simple and user-friendly map display action component for your Filament application. It utilizes an iframe to render the map, ensuring seamless integration. Ensure you have a Google Maps API key to use this package.
You can install the package via composer:
composer require codewithdennis/filament-simple-map
You can publish the config file with:
php artisan vendor:publish --tag="filament-simple-map-config"
This is the contents of the published config file:
return [
'google_maps_embed_api_key' => env('GOOGLE_MAPS_EMBED_API_KEY'),
];
This package supports the following Google Maps modes place
, view
, streetview
, search
and directions
. The default mode is place
.
Methods that are available with the default place mode.
Defines map marker location.
->address('City Hall, New York, NY')
Defines center of the map view.
->center('37.4218,-122.0840')
Sets initial zoom level of the map.
->zoom(10) // 0 to 21
Sets the map to satellite view. (default: roadmap)
->satellite()
Defines the language to use for UI elements and for the display of labels on map tiles.
->language('en')
Defines the appropriate borders and labels to display, based on geopolitical sensitivities.
->region('en')
Here is an example of how to use the place mode.
Forms\Components\TextInput::make('address')
->required()
->maxLength(255)
->suffixAction(
SimpleMap::make('showMap')
->icon('heroicon-o-map')
->address('City Hall, New York, NY')
->center('37.4218,-122.0840')
->zoom(10)
->satellite()
->language('en')
->region('US'),
),
To use the view mode, you need to call the viewing
method.
Sets the map to viewing mode.
->viewing()
Defines center of the map view.
->center('-33.8569,151.2152')
Sets initial zoom level of the map.
->zoom(10) // 0 to 21
Sets the map to satellite view. (default: roadmap)
->satellite()
Here is an example of how to use the view
mode.
Forms\Components\TextInput::make('address')
->required()
->maxLength(255)
->suffixAction(
SimpleMap::make('showMap')
->viewing()
->center('-33.8569,151.2152')
->zoom(10)
->satellite()
),
To use the directions mode, you need to call the directions
method.
Defines the starting point for calculating directions.
->origin('Amsterdam, Netherlands')
Defines the destination point for calculating directions.
->destination('Rotterdam, Netherlands')
Specifies one or more intermediary places to route directions between the origin and destination.
->waypoints([
'Utrecht, Netherlands',
'Den Haag, Netherlands'
])
Specifies features to avoid in directions. Note that this doesn't preclude routes that include the restricted feature(s); it biases the result to more favorable routes.
->avoid([
'tolls',
'highways',
'ferries'
])
Sets the mode of transport to flying.
->flying()
Sets the mode of transport to walking.
->walking()
Sets the mode of transport to bicycling.
->bicycling()
Sets the mode of transport to transit.
->transit()
Sets the mode of transport to driving.
->driving()
Sets the unit system to imperial. (default: metric)
->imperial()
Defines center of the map view.
->center('52.3676,4.9041')
Sets the map to satellite view. (default: roadmap)
->satellite()
Defines the language to use for UI elements and for the display of labels on map tiles.
->language('nl')
Defines the appropriate borders and labels to display, based on geopolitical sensitivities.
->region('nl')
Here is an example of how to use the directions mode.
Forms\Components\TextInput::make('address')
->required()
->maxLength(255)
->suffixAction(
SimpleMap::make('showMap')
->directions()
->origin('Amsterdam, Netherlands')
->destination('Rotterdam, Netherlands')
->walking()
->imperial()
->satellite()
->language('nl')
),
To use the streetview mode, you need to call the streetview
method.
Defines the location to display street view.
->location('52.3676,4.9041')
Indicates the compass heading of the camera in degrees clockwise from North.
->heading(0) // -180 to 360
Specifies the angle, up or down, of the camera.
->pitch(0) // -90 to 90
Determines the horizontal field of view of the image.
->fov(100) // 10 to 100
Defines center of the map view.
->center('52.3676,4.9041')
Sets initial zoom level of the map.
->zoom(10) // 0 to 21
Defines the language to use for UI elements and for the display of labels on map tiles.
->language('nl')
Defines the appropriate borders and labels to display, based on geopolitical sensitivities.
->region('nl')
To use the search mode, you need to call the search
method.
Defines the search term.
->query('restaurants near Amsterdam, Netherlands')
Defines center of the map view.
->center('52.3676,4.9041')
Sets initial zoom level of the map.
->zoom(10) // 0 to 21
Sets the map to satellite view. (default: roadmap)
->satellite()
Defines the language to use for UI elements and for the display of labels on map tiles.
->language('nl')
Defines the appropriate borders and labels to display, based on geopolitical sensitivities.
->region('nl')
Here is an example of how to use the search mode.
Forms\Components\TextInput::make('address')
->required()
->maxLength(255)
->suffixAction(
SimpleMap::make()
->search()
->query('restaurants near Amsterdam, Netherlands')
->center('52.3676,4.9041')
->zoom(10)
),
Please see CONTRIBUTING for details.
The MIT License (MIT). Please see License File for more information.