Google Maps with Livewire - change model and map disappears

What seems to be the problem:
The first load of google maps is fine (I’m using https://github.com/bradcornford/Googlmapper but the same applies with https://hpneo.dev/gmaps/) but if I change a model (like a checkbox) it reloads and the map disappears. The dom is still there but just blank.

Steps to Reproduce:

  • Install Googlmapper
  • Create a blade file which calls @livewire(‘map’)
  • livewire/map.blade.php contains the checkbox (wire:model=) and the div for the google map (
    {!! \Mapper::render() !!}

Are you using the latest version of Livewire:
Yes, downloaded via composer yesterday evening.

Do you have any screenshots or code examples:
Hopefully as above helps, but can supply full code examples if required.

Does it help if you add wire:ignore to the div with the map?

Yes, adding wire:ignore stops it disappearing but then I lose the ability to change the map.

Setting the value of the checkbox is intended to display a different map.

And when you trigger an event when you change the checkbox? En listening for that via inline javascript?

<script>
    @this.on('checkbox_updated', () => { refresh_google_map() });
</script>

I haven’t tried that (yet) but I have just tried adding the following:

<script>
    document.addEventListener("livewire:load", function(event) {
        
        window.livewire.afterDomUpdate(() => {
            // Add your custom JavaScript here.
           
            initialize_0();
        });
    });
</script>

This actually redraws the original map, so now it doesn’t disappear. The DOM (script) is updated to the new map, but it seems like its re-running the function initialise_0 from before the DOM is updated - in memory?

With some more debugging I’ve managed to discover that a new function, defined in a script which is updated by Livewire after the initial render, is being reported as “new_function_name is not defined” on the console, and I strongly think that is the problem thats stopping this working.