Merge pull request #110 from Heyian/MapStyle

Added capability to choose map style

Author: cheesegrits

README.md

@@ -358,6 +358,7 @@ use Cheesegrits\FilamentGoogleMaps\Fields\Map
     ->defaultLocation([39.526610, -107.727261]) // default for new forms
     ->draggable() // allow dragging to move marker
     ->clickable(false) // allow clicking to move marker
+    ->mapType('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
     ->geolocateOnLoad(true, false) // geolocate on load, second arg 'always' (default false, only for new form))

dist/cheesegrits/filament-google-maps/filament-google-maps-widget.js

@@ -70,6 +70,7 @@ export default function filamentGoogleMapsField({
   placeUpdatedUsing,
   hasReverseGeocodeUsing = false,
   hasPlaceUpdatedUsing = false,
+  mapType = 'roadmap',
 }) {
   return {
     state,
@@ -151,6 +152,7 @@ export default function filamentGoogleMapsField({
       this.map = new google.maps.Map(mapEl, {
         center: this.getCoordinates(),
         zoom: defaultZoom,
+        mapTypeId: google.maps.MapTypeId[mapType.toUpperCase()],
         ...controls,
       });
 

dist/cheesegrits/filament-google-maps/filament-google-maps.js

@@ -53,7 +53,8 @@
                     pacEl: $refs.pacinput,
                     polyOptions: @js($getPolyOptions()),
                     circleOptions: @js($getCircleOptions()),
-                    rectangleOptions: @js($getRectangleOptions())
+                    rectangleOptions: @js($getRectangleOptions()),
+                    mapType: @js($getMapType()),
                 })"
         id="{{ $getId() . '-alpine' }}"
         wire:ignore

resources/js/filament-google-maps.js

@@ -71,6 +71,8 @@ class Map extends Field
 
     protected ?Closure $placeUpdatedUsing = null;
 
+    protected Closure|string $mapType = 'roadmap';
+
     protected Closure|array $drawingModes = [
         'marker'    => true,
         'circle'    => true,
@@ -822,6 +824,7 @@ public function getMapConfig(): string
             'polyOptions'            => $this->getPolyOptions(),
             'rectangleOptions'       => $this->getRectangeOptions(),
             'circleOptions'          => $this->getCircleOptions(),
+            'mapType'                => $this->getMapType(),
         ]);
 
         //ray($config);
@@ -879,4 +882,18 @@ public function getCircleOptions(): ?array
     {
         return $this->evaluate($this->circleOptions);
     }
+
+    public function mapType(Closure|string $mapType): static
+    {
+        $this->mapType = $mapType;
+
+        return $this;
+    }
+
+    public function getMapType(): string
+    {
+        return $this->evaluate($this->mapType);
+    }
+
+
 }