Skip to content

Commit f60090a

Browse files
cheesegritscheesegrits
committed
Adding new callback features
1 parent fca5389 commit f60090a

File tree

4 files changed

+113
-35
lines changed

4 files changed

+113
-35
lines changed

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/filament-google-maps.js‎

Lines changed: 88 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default function filamentGoogleMapsField(
1111
draggable,
1212
clickable,
1313
defaultLocation,
14+
statePath,
1415
controls,
1516
layers,
1617
reverseGeocodeFields,
@@ -36,6 +37,10 @@ export default function filamentGoogleMapsField(
3637
geoJsonField,
3738
geoJsonProperty,
3839
geoJsonVisible,
40+
reverseGeocodeUsing,
41+
placeUpdatedUsing,
42+
hasReverseGeocodeUsing = false,
43+
hasPlaceUpdatedUsing = false,
3944
}
4045
) {
4146
return {
@@ -82,6 +87,8 @@ export default function filamentGoogleMapsField(
8287
// zIndex: 1,
8388
},
8489
selectedShape: null,
90+
placesService: null,
91+
placeFields: [],
8592

8693
loadGMaps: function () {
8794
if (!document.getElementById('filament-google-maps-google-maps-js')) {
@@ -154,6 +161,20 @@ export default function filamentGoogleMapsField(
154161
})
155162
}
156163

164+
if (hasPlaceUpdatedUsing) {
165+
this.placesService = new google.maps.places.PlacesService(this.map);
166+
}
167+
168+
this.placeFields = ["address_components", "formatted_address", "geometry", "name"];
169+
170+
if (!this.placeFields.includes(placeField)) {
171+
this.placeFields.push(placeField);
172+
}
173+
174+
if (hasPlaceUpdatedUsing) {
175+
this.placeFields.push("photos");
176+
}
177+
157178
if (autocomplete) {
158179
const geoComplete = document.getElementById(autocomplete);
159180

@@ -167,14 +188,8 @@ export default function filamentGoogleMapsField(
167188
}
168189
}, true);
169190

170-
let fields = ["address_components", "formatted_address", "geometry", "name"];
171-
172-
if (!fields.includes(placeField)) {
173-
fields.push(placeField);
174-
}
175-
176191
const geocompleteOptions = {
177-
fields: fields,
192+
fields: this.placeFields,
178193
strictBounds: false,
179194
types: types,
180195
};
@@ -203,7 +218,10 @@ export default function filamentGoogleMapsField(
203218
this.marker.setPosition(place.geometry.location);
204219
this.markerLocation = place.geometry.location;
205220
this.setCoordinates(place.geometry.location);
206-
this.updateGeocode(place.address_components);
221+
this.updateGeocodeFromAddressComponents(place.address_components);
222+
if (hasPlaceUpdatedUsing) {
223+
placeUpdatedUsing(place);
224+
}
207225
});
208226
}
209227
}
@@ -329,7 +347,7 @@ export default function filamentGoogleMapsField(
329347
const markerLocation = this.marker.getPosition();
330348

331349
if (!(location.lat === markerLocation.lat() && location.lng === markerLocation.lng())) {
332-
this.updateAutocomplete(location)
350+
this.updateAutocompleteFromLocation(location)
333351
this.updateMap(location);
334352
}
335353
})
@@ -338,47 +356,80 @@ export default function filamentGoogleMapsField(
338356
this.geoJsonContains(event.latLng);
339357
this.markerLocation = event.latLng.toJSON();
340358
this.setCoordinates(this.markerLocation);
341-
this.updateAutocomplete(this.markerLocation);
342-
this.updateGeocodeFromLocation(this.markerLocation);
343-
// this.updateMap(this.markerLocation);
359+
this.updateFromLocation(this.markerLocation);
344360
this.map.panTo(this.markerLocation);
361+
362+
if (hasPlaceUpdatedUsing && event.placeId) {
363+
this.placesService.getDetails(
364+
{
365+
placeId: event.placeId,
366+
fields: this.placeFields
367+
},
368+
(results, status) => {
369+
status === 'OK' && placeUpdatedUsing(results);
370+
}
371+
);
372+
}
345373
},
346374
updateMap: function (position) {
347375
this.marker.setPosition(position);
348376
this.map.panTo(position);
349377
},
350-
updateGeocode: function (address_components) {
351-
const replacements = this.getReplacements(address_components);
378+
updateFromLocation: function (location) {
379+
if (this.hasReverseGeocode() || this.hasReverseAutocomplete()) {
380+
this.geocoder
381+
.geocode({location})
382+
.then((response) => {
383+
this.updateGeocodeFromAddressComponents(response.results[0].address_components)
384+
this.updateAutocompleteFromFormattedAddress(response.results[0].formatted_address)
385+
if (hasReverseGeocodeUsing) {
386+
reverseGeocodeUsing(response);
387+
}
388+
})
389+
.catch((error) => {
390+
console.log(error.message);
391+
})
392+
}
393+
},
394+
updateGeocodeFromAddressComponents: function (address_components) {
395+
if (this.hasReverseGeocode()) {
396+
const replacements = this.getReplacements(address_components);
397+
398+
for (const field in reverseGeocodeFields) {
399+
let replaced = reverseGeocodeFields[field];
400+
for (const replacement in replacements) {
401+
replaced = replaced.split(replacement).join(replacements[replacement]);
402+
}
352403

353-
for (const field in reverseGeocodeFields) {
354-
let replaced = reverseGeocodeFields[field];
355-
for (const replacement in replacements) {
356-
replaced = replaced.split(replacement).join(replacements[replacement]);
357-
}
404+
for (const symbol in this.symbols) {
405+
replaced = replaced.split(symbol).join('');
406+
}
358407

359-
for (const symbol in this.symbols) {
360-
replaced = replaced.split(symbol).join('');
408+
replaced = replaced.trim();
409+
setStateUsing(field, replaced)
361410
}
362-
363-
replaced = replaced.trim();
364-
setStateUsing(field, replaced)
365411
}
366412
},
367413
updateGeocodeFromLocation: function (location) {
368-
if (Object.keys(reverseGeocodeFields).length > 0) {
414+
if (this.hasReverseGeocode()) {
369415
this.geocoder
370-
.geocode({ location })
416+
.geocode({location})
371417
.then((response) => response.results[0].address_components)
372-
.then((address_components) => this.updateGeocode(address_components))
418+
.then((address_components) => this.updateGeocodeFromAddressComponents(address_components))
373419
.catch((error) => {
374420
console.log(error.message);
375421
})
376422
}
377423
},
378-
updateAutocomplete: function (position) {
379-
if (autocomplete && autocompleteReverse) {
424+
updateAutocompleteFromFormattedAddress: function (address) {
425+
if (this.hasReverseAutocomplete()) {
426+
setStateUsing(autocomplete, address);
427+
}
428+
},
429+
updateAutocompleteFromLocation: function (location) {
430+
if (this.hasReverseAutocomplete()) {
380431
this.geocoder
381-
.geocode({location: position})
432+
.geocode({location: location})
382433
.then((response) => {
383434
if (response.results[0]) {
384435
setStateUsing(autocomplete, response.results[0].formatted_address);
@@ -389,6 +440,12 @@ export default function filamentGoogleMapsField(
389440
})
390441
}
391442
},
443+
hasReverseAutocomplete: function () {
444+
return autocomplete && autocompleteReverse
445+
},
446+
hasReverseGeocode: function () {
447+
return Object.keys(reverseGeocodeFields).length > 0 || reverseGeocodeUsing
448+
},
392449
setCoordinates: function (position) {
393450
this.state = position;
394451
},
@@ -405,8 +462,7 @@ export default function filamentGoogleMapsField(
405462
lng: position.coords.longitude
406463
};
407464
this.setCoordinates(this.markerLocation);
408-
this.updateAutocomplete(this.markerLocation);
409-
this.updateGeocodeFromLocation(this.markerLocation);
465+
this.updateFromLocation(this.markerLocation);
410466
this.map.panTo(this.markerLocation);
411467
});
412468
},

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
:component="$getFieldWrapperView()"
33
:field="$field"
44
>
5+
@php
6+
$statePath = $getStatePath();
7+
@endphp
8+
59
<div
610
x-ignore
711
ax-load
@@ -14,6 +18,12 @@
1418
getStateUsing: (path) => {
1519
return $wire.get(path)
1620
},
21+
reverseGeocodeUsing: (results) => {
22+
$wire.reverseGeocodeUsing(@js($statePath), results)
23+
},
24+
placeUpdatedUsing: (results) => {
25+
$wire.placeUpdatedUsing(@js($statePath), results)
26+
},
1727
autocomplete: @js($getAutocompleteId()),
1828
autocompleteReverse: @js($getAutocompleteReverse()),
1929
geolocate: @js($getGeolocate()),
@@ -26,6 +36,8 @@
2636
controls: @js($getMapControls()),
2737
layers: @js($getLayers()),
2838
reverseGeocodeFields: @js($getReverseGeocode()),
39+
hasReverseGeocodeUsing: @js($getReverseGeocodeUsing()),
40+
hasPlaceUpdatedUsing: @js($getPlaceUpdatedUsing()),
2941
defaultZoom: @js($getDefaultZoom()),
3042
types: @js($getTypes()),
3143
countries: @js($getCountries()),

‎src/Fields/Map.php‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -699,6 +699,11 @@ public function reverseGeocodeUsing(?Closure $closure): static
699699
return $this;
700700
}
701701

702+
public function getReverseGeocodeUsing(): bool
703+
{
704+
return $this->reverseGeocodeUsing !== null;
705+
}
706+
702707
public function reverseGeocodeUpdated(array $results): static
703708
{
704709
$callback = $this->reverseGeocodeUsing;
@@ -726,6 +731,11 @@ public function placeUpdatedUsing(?Closure $closure): static
726731

727732
return $this;
728733
}
734+
735+
public function getPlaceUpdatedUsing(): bool
736+
{
737+
return $this->placeUpdatedUsing !== null;
738+
}
729739

730740
public function placeUpdated(array $place): static
731741
{
@@ -767,8 +777,8 @@ public function getMapConfig(): string
767777
'drawingField' => $this->getDrawingField(),
768778
'layers' => $this->getLayers(),
769779
'reverseGeocodeFields' => $this->getReverseGeocode(),
770-
'reverseGeocodeUsing' => $this->reverseGeocodeUsing !== null,
771-
'placeUpdatedUsing' => $this->placeUpdatedUsing !== null,
780+
'reverseGeocodeUsing' => $this->getReverseGeocodeUsing(),
781+
'placeUpdatedUsing' => $this->getPlaceUpdatedUsing(),
772782
'defaultZoom' => $this->getDefaultZoom(),
773783
'geoJson' => $this->getGeoJsonFile(),
774784
'geoJsonField' => $this->getGeoJsonField(),

0 commit comments

Comments
 (0)