fix css, add parameter position, set default icon

README.md

@@ -360,7 +360,8 @@ use Cheesegrits\FilamentGoogleMaps\Fields\Map
     ->clickable(false) // allow clicking to move marker
     ->type('roadmap') // map type (hybrid, satellite, roadmap, terrain)
     ->geolocate() // adds a button to request device location and set map marker accordingly
-    ->geolocateLabel('Get Location') // overrides the default label for geolocate button
+    ->geolocateLabel('Get Location') // overrides the default label for geolocate button, empty string for default icon
+    ->geolocatePosition('TOP_CENTER') // overrides the default position for geolocate button (default: TOP_CENTER, see other options in https://developers.google.com/maps/documentation/javascript/examples/control-positioning )
     ->geolocateOnLoad(true, false) // geolocate on load, second arg 'always' (default false, only for new form))
     ->layers([
         'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml',

resources/css/filament-google-maps.css

@@ -1,5 +1,7 @@
 .custom-map-control-button {
     background-color: #fff;
+    vertical-align: middle;
+    color: rgb(86, 86, 86);
     border: 0;
     border-radius: 2px;
     box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
@@ -10,6 +12,7 @@
     height: 40px;
     cursor: pointer;
 }
+
 .custom-map-control-button:hover {
     background: rgb(235, 235, 235);
 }

resources/js/filament-google-maps.js

@@ -1,3 +1,5 @@
+import '../css/filament-google-maps.css';
+
 export default function filamentGoogleMapsField({
   state,
   setStateUsing,
@@ -7,6 +9,7 @@ export default function filamentGoogleMapsField({
   geolocate = false,
   geolocateOnLoad,
   geolocateLabel,
+  geolocatePosition,
   draggable,
   clickable,
   defaultLocation,
@@ -304,9 +307,18 @@ export default function filamentGoogleMapsField({
       if (geolocate && "geolocation" in navigator) {
         const locationButton = document.createElement("button");
 
-        locationButton.textContent = geolocateLabel;
+        if (geolocateLabel) {
+          locationButton.textContent = geolocateLabel;
+        } else {
+          locationButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="#565656" width="24px" height="24px" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M13 4.069V2h-2v2.069A8.01 8.01 0 0 0 4.069 11H2v2h2.069A8.008 8.008 0 0 0 11 19.931V22h2v-2.069A8.007 8.007 0 0 0 19.931 13H22v-2h-2.069A8.008 8.008 0 0 0 13 4.069zM12 18c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6z"/></svg>';
+        }
         locationButton.classList.add("custom-map-control-button");
-        this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(
+        let controlPosition = google.maps.ControlPosition.TOP_CENTER;
+        if (geolocatePosition && geolocatePosition in google.maps.ControlPosition) {
+          controlPosition = google.maps.ControlPosition[geolocatePosition];
+        }
+
+        this.map.controls[controlPosition].push(
           locationButton
         );
 

resources/js/index.js

@@ -1 +1 @@
-import '../css/filament-google-maps.css'
+

resources/views/fields/filament-google-maps.blade.php

@@ -6,6 +6,7 @@
     <div
         x-ignore
         ax-load
+        x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('filament-google-maps-field', 'cheesegrits/filament-google-maps'))]"
         ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('filament-google-maps-field', 'cheesegrits/filament-google-maps') }}"
         x-data="filamentGoogleMapsField({
                     state: $wire.entangle('{{ $getStatePath() }}'),
@@ -26,6 +27,7 @@
                     geolocate: @js($getGeolocate()),
                     geolocateOnLoad: @js($getGeolocateOnLoad()),
                     geolocateLabel: @js($getGeolocateLabel()),
+                    geolocatePosition: @js($getGeolocatePosition()),
                     draggable: @js($getDraggable()),
                     clickable: @js($getClickable()),
                     defaultLocation: @js($getDefaultLocation()),

src/Fields/Map.php

@@ -49,6 +49,8 @@ class Map extends Field
 
     protected Closure|string|null $geolocateLabel = null;
 
+    protected Closure|string|null $geolocatePosition = null;
+
     protected Closure|array $reverseGeocode = [];
 
     protected Closure|bool $debug = false;
@@ -92,6 +94,7 @@ class Map extends Field
         'geolocate'           => false,
         'geolocateOnLoad'     => false,
         'geolocateLabel'      => '',
+        'geolocatePosition'   => 'TOP_CENTER',
         'draggable'           => true,
         'clickable'           => false,
         'defaultLocation'     => [
@@ -346,6 +349,23 @@ public function getGeolocateLabel(): string
         return $this->evaluate($this->geolocateLabel) ?? __('filament-google-maps::fgm.geolocate.label');
     }
 
+    /**
+     * Override the position to use for the geolocate feature, defaults to 'Set Current Location'
+     *
+     * @return $this
+     */
+    public function geolocatePosition(Closure|string $geolocatePosition): static
+    {
+        $this->geolocatePosition = $geolocatePosition;
+
+        return $this;
+    }
+
+    public function getGeolocatePosition(): string
+    {
+        return $this->evaluate($this->geolocatePosition) ?? __('filament-google-maps::fgm.geolocate.position');
+    }
+
     /**
      * Add drawing controls to the map
      *
@@ -800,6 +820,7 @@ public function getMapConfig(): string
             'autocompleteReverse'    => $this->getAutocompleteReverse(),
             'geolocate'              => $this->getGeolocate(),
             'geolocateLabel'         => $this->getGeolocateLabel(),
+            'geolocatePosition'      => $this->getGeolocatePosition(),
             'geolocateOnLoad'        => $this->getGeolocateOnLoad(),
             'draggable'              => $this->getDraggable(),
             'clickable'              => $this->getClickable(),

src/FilamentGoogleMapsServiceProvider.php

@@ -6,6 +6,7 @@
 use Cheesegrits\FilamentGoogleMaps\Widgets\MapWidget;
 use Filament\Support\Assets\AlpineComponent;
 use Filament\Support\Assets\AssetManager;
+use Filament\Support\Assets\Css;
 use Filament\Support\Facades\FilamentAsset;
 use Spatie\LaravelPackageTools\Package;
 use Spatie\LaravelPackageTools\PackageServiceProvider;
@@ -59,6 +60,7 @@ public function packageRegistered(): void
         $this->mergeConfigFrom(__DIR__ . '/../config/filament-google-maps.php', 'filament-google-maps');
         $this->app->resolving(AssetManager::class, function () {
             FilamentAsset::register([
+                Css::make('filament-google-maps-field', __DIR__ . '/../dist/cheesegrits/filament-google-maps/filament-google-maps.css')->loadedOnRequest(),
                 AlpineComponent::make('filament-google-maps-geocomplete', __DIR__ . '/../dist/cheesegrits/filament-google-maps/filament-google-geocomplete.js'),
                 AlpineComponent::make('filament-google-maps-field', __DIR__ . '/../dist/cheesegrits/filament-google-maps/filament-google-maps.js'),
                 AlpineComponent::make('filament-google-maps-widget', __DIR__ . '/../dist/cheesegrits/filament-google-maps/filament-google-maps-widget.js'),