update documentations

erkurn · Sep 27, 2022 · 1e0a5d7 · 1e0a5d7
1 parent bf87ea1
commit 1e0a5d7
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -33,11 +33,29 @@ class FilamentResource extends Resource
     {
         return $form->schema([
             AddressPicker::make('coordinate')
-                ->apiKey('Google Map API')
+                ->setDefaultLocation([ // Set Default Location
+                    'lat' =>    -6.914744,
+                    'lng'  =>  107.609810
+                ])
+                ->mapControls([ // Map Controls
+                    'mapTypeControl' => true,
+                    'scaleControl' => true,
+                    'streetViewControl' => false,
+                    'rotateControl' => true,
+                    'fullscreenControl' => true,
+                    'searchBoxControl' => true
+                ])
+                ->minHeight(300) // Min Height In Pixels
+                ->defaultZoom(16) // Default Zoom
+                ->placeholder("Search Address") // Default Search
+                ->afterStateUpdated(function ($state, $component, $set) {
+                    $location = $component->getAddress(); // Get Details Location After Pick Location
+
+                    $location->getAdminLevels()->get(4)->getName(); // Post Code
+                    $location->getStreetName(); // Street Name
+                    $location->getStreetNumber(); // Street Number
+                })
                 ->placeholder("Search Address")
-                //->default('-6.903650, 107.639099') // Coordinate Format
-                //->default('Kota Bandung') // Address Format
-                ->showValue()
         ]);  
     }
 }

diff --git a/composer.json b/composer.json
@@ -17,8 +17,18 @@
     ],
     "require": {
         "php": "^8.1",
+        "geocoder-php/cache-provider": "^4.4",
+        "geocoder-php/chain-provider": "^4.0",
+        "geocoder-php/geo-plugin-provider": "^4.0",
+        "geocoder-php/google-maps-provider": "^4.0",
+        "guzzlehttp/psr7": "*",
+        "http-interop/http-factory-guzzle": "^1.0",
+        "illuminate/cache": "^5.0|^6.0|^7.0|^8.0|^9.0",
+        "illuminate/contracts": "^9.0",
+        "illuminate/support": "^5.0|^6.0|^7.0|^8.0|^9.0",
+        "php-http/curl-client": "*",
         "spatie/laravel-package-tools": "^1.9.2",
-        "illuminate/contracts": "^9.0"
+        "willdurand/geocoder": "^4.0"
     },
     "require-dev": {
         "filament/filament": "^2.0",

diff --git a/config/filament-address-picker.php b/config/filament-address-picker.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+    'google_map_key' => "",
+];
diff --git a/resources/dist/js/filament-address-picker.js b/resources/dist/js/filament-address-picker.js
diff --git a/resources/dist/mix-manifest.json b/resources/dist/mix-manifest.json
@@ -1,3 +1,3 @@
 {
-    "/js/filament-address-picker.js": "/js/filament-address-picker.js?id=52eaf451a8cd762fdc8033861f4a8075"
+    "/js/filament-address-picker.js": "/js/filament-address-picker.js?id=0f947caf93cee5ab7588f6638ded43aa"
 }
diff --git a/resources/js/components/address-picker.js b/resources/js/components/address-picker.js
@@ -3,7 +3,10 @@ import { Loader } from '@googlemaps/js-api-loader';
 export default (Alpine) => {
     Alpine.data('addressPickerFormComponent', ({
         state,
-        api_key
+        api_key,
+        zoom,
+        controls,
+        defaultLocation
     }) => {
         const loader = new Loader({
             apiKey: api_key,
@@ -14,77 +17,65 @@ export default (Alpine) => {
         return {
             state,
             api_key,
-            map: null,
-            marker: null,
+            markerLocation: {},
             coordinate: {
                 lat: 0,
                 lng: 0
             },
             init: function() {
-                if (!(this.state === null || this.state === '')) {
-                    this.setState(this.state)
-                }
-
                 loader.loadCallback(e => {
                     if (e) {
                         console.log(e)
                     }
 
-                    this.map = new google.maps.Map(this.$refs.map_container, {
-                        zoom: 16,
-                        center: this.coordinate,
-                        streetViewControl: false
+                    var valueLocation = null;
+                    if (this?.state instanceof Object) {
+                        valueLocation = this?.state;
+                    } else {
+                        valueLocation = JSON.parse(this?.state);
+                    }
+
+                    var center = {
+                        lat: valueLocation?.lat || defaultLocation.lat,
+                        lng: valueLocation?.lng || defaultLocation.lng
+                    }
+
+                    var map = new google.maps.Map(this.$refs.map_container, {
+                        zoom: zoom,
+                        center: center,
+                        streetViewControl: false,
+                        ...controls
+                    });
+
+                    var marker = new google.maps.Marker({
+                        map
                     });
 
-                    if (!this.is_coordinate(this.state)) {
-                        const request = {
-                            query: this.state,
-                            fields: ["name", "geometry"],
-                        };
-                        let service = new google.maps.places.PlacesService(this.map)
-                        service.findPlaceFromQuery(request, (results, status) => {
-                            if (status === google.maps.places.PlacesServiceStatus.OK && results) {
-                                this.createMark(results[0].geometry.location)
-                                this.map.setCenter(results[0].geometry.location);
-                            }
-                        });
+                    if (valueLocation?.lat && valueLocation?.lng) {
+                        marker.setPosition(valueLocation);
                     }
 
-                    this.createMark()
-                })
-            },
-            createMark: function (position) {
-                let map = this.map;
-                this.marker = new google.maps.Marker({
-                    position: position || this.coordinate,
-                    map,
-                    title: "Mark",
-                    draggable: true
-                });
+                    map.addListener('click', (event) => {
+                        this.markerLocation = event.latLng.toJSON();
+                    });
 
-                const parent = this;
-                google.maps.event.addListener(this.marker, 'dragend', function(marker) {
-                    var latLng = marker.latLng;
-                    state = latLng.lat() + ',' + latLng.lng();
-                    parent.setState(state);
-                });
-            },
-            is_coordinate: function(value) {
-                try {
-                    let lat = value.split(',')[0];
-                    let lng = value.split(',')[1]
+                    if (controls.searchBoxControl) {
+                        const input = this.$refs.map_search;
+                        const searchBox = new google.maps.places.SearchBox(input);
+                        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
+                        searchBox.addListener("places_changed", () => {
+                            input.value = ''
+                            this.markerLocation = searchBox.getPlaces()[0].geometry.location
+                        })
+                    }
 
-                    return (isFinite(lat) && Math.abs(lat) <= 90) && (isFinite(lng) && Math.abs(lng) <= 180);
-                } catch (e) {
-                }
-                return false;
-            },
-            setState: function (value) {
-                this.state = value;
-                if (this.is_coordinate(value)) {
-                    this.coordinate.lat = parseFloat(value.split(',')[0]);
-                    this.coordinate.lng = parseFloat(value.split(',')[1]);
-                }
+                    this.$watch('markerLocation', () => {
+                        let position = this.markerLocation;
+                        this.state = position;
+                        marker.setPosition(position);
+                        map.panTo(position);
+                    })
+                })
             },
         }
     })