How do I create and use multiple independent components that depend on the same script (ie Google Maps API) in Backpack for Laravel? - laravel-backpack

Question

I am trying to make a Create form in Laravel Backpack that has two fields: an address_google field, and a custom field based on https://github.com/abr4xas/gmaps-input-backpack, which includes the Google Maps API to render a map. Each includes an import of the Google Maps API. I'm looking for a way to build this map component as an independent backpack component, which depends on the Google Maps API, and I don't want to include the Google Maps API once for each component. Here's what I've found:
When both fields are allowed to use their default import, an error is thrown stating "You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors"
(image of the log here). On the actual page, the address_google field works, but the map doesn't render at all (seen here).
If I comment out the Google Maps import in the address_google field, the map does render, but the address_google field does not autocomplete (seen here).
If I comment out the Google Maps import in the map field, the address_google field will autocomplete, but the map will not render (seen here).
Finally, if I put the Google Maps import link in config/backpack/base.php in the scripts part of the array, and remove the Google Maps import on both the address_google field and map field, I can get both to render properly (seen here), but then the google maps API is imported into every admin panel in the application, and I don't want the Google Maps library to be included globally like this.
How would I include the Google Maps API, so that the two includes do not conflict each other? More generally, is there a recommended technique for creating independent Backpack components that depend on the same script when they will be used together on the same screen?

Answer 1

That's an interesting question. There's no default way to do that in Backpack, but here are two possible options:
Option (1) Only load the JS in your custom field type if address_google isn't loaded onpage:
{{-- resources/views/vendor/backpack/base/widgets/gmaps --}}
#if ($crud->fieldTypeNotLoaded(['type' => 'address_google']))
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=XXXXXXX&libraries=places&callback=initGoogleAddressAutocomplete" async defer></script>
#endif
Option (2) Create a Backpack widget with the script:
#push('after_scripts')
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=XXXXXXX&libraries=places&callback=initGoogleAddressAutocomplete" async defer></script>
#endpush
and add that widget only on Create and Update for this entity, in your setupCreateOperation() and/or setupUpdateOperation()
Widget::add([
'type' => 'gmaps_script',
]);
Of course, option 2 could be generalized as a script widget, where you pass the URL as a parameter, and maybe other attributes too.