Google Maps with Livewire - change model and map disappears

#1

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.

1 Like
#2

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

#3

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.

#4

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>
#5

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?

#6

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.

#7

Hi, i am experiencing the same issue. Do you have a solution for that?
I am also having trouble to get the map rendering on a hidden element, which will become visible with livewire click action.

1 Like
#8

Its been 12 months since I worked on that code - it was a personal project. Can you elaborate on your specific problem?