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 but the same applies with 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?

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

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

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

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.