loading javascript for specific form field component?
I am trying to build a form field using google maps to click for getting specific longitude and latitude. I'm working from scratch because I need to use an overlay and bind it to a specific location/boundaries.
The problem is, I can't seem to figure out the best practices for loading the google maps code only for this given form field component.
I tried doing the following in the blade template for the custom field, but it never seems to try to load the custom javascript and thus reports that the 'initializeMap' defined in the custom javascript code is undefined:
<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field">
<div
x-data="
initializeMap( $refs.map, $wire.$entangle('{{ $getStatePath() }}') )
"
ax-load
ax-load-src="{{ Vite::asset('resources/js/gmap-location.js') }}"
style="height: 400px; width: 50%;"
>
<div x-ref="map" style="height: 100%; width: 100%;"></div>
</div>
</x-dynamic-component>
I even tried loading the gmap-location.js from the App provider (although I prefer not to do this as there's no need to load that on every page, only on two form pages) but get the same result. I was trying to use the ax-load functionality I see described in async-alpine to not only load it just for this scope but I thought this would tie the execution of the alpine-specific code to after the javascript was loaded.
What am I doing wrong here and how do I load the form field javascript only when needed for the form field itself?
The problem is, I can't seem to figure out the best practices for loading the google maps code only for this given form field component.
I tried doing the following in the blade template for the custom field, but it never seems to try to load the custom javascript and thus reports that the 'initializeMap' defined in the custom javascript code is undefined:
<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field">
<div
x-data="
initializeMap( $refs.map, $wire.$entangle('{{ $getStatePath() }}') )
"
ax-load
ax-load-src="{{ Vite::asset('resources/js/gmap-location.js') }}"
style="height: 400px; width: 50%;"
>
<div x-ref="map" style="height: 100%; width: 100%;"></div>
</div>
</x-dynamic-component>
I even tried loading the gmap-location.js from the App provider (although I prefer not to do this as there's no need to load that on every page, only on two form pages) but get the same result. I was trying to use the ax-load functionality I see described in async-alpine to not only load it just for this scope but I thought this would tie the execution of the alpine-specific code to after the javascript was loaded.
What am I doing wrong here and how do I load the form field javascript only when needed for the form field itself?
