"Unable to find marker" when loading map via Sprig

[drifteaur]

I followed the guide to set up a dynamic map using Sprig:

https://plugins.doublesecretagency.com/google-maps/guides/sprig/

The map loads fine on the initial page load, and the info windows show when clicking the markers. When the map is refreshed via sprig (in this case, the map is paginated, and going to the next page loads the next set of locations) - the map shows, but the info windows won't open.

On initial load:

On sprig request:

I assume googleMaps._listInfoWindows is not being refreshed on a Sprig request somehow. Any way to fix this?

[drifteaur]

My Twig code, if it's relevant:

{% set mapId = 'properties-map' %}
  {% set mapOptions = {
      'id': mapId,
      'infoWindowTemplate': '_sprig-components/property-filter/_map_bubble',
      'cluster': true,
      'mapOptions': {
          'maxZoom': 17,
      },
      'markerOptions': {
          'icon': '/static/svg/marker.svg',
      }
  } %}

  <style>
      #{{mapId}} {
          height: 100%;
      }
  </style>

  {{ googleMaps.map(entries, mapOptions).tag() }}

  {% if sprig.isRequest %}
      <script>
          googleMaps.init('{{ mapId }}');
      </script>
  {% endif %}

[lindseydiloreto]

Hi @drifteaur,

There have been some changes recently in that area... which version of the Google Maps plugin are you running?

Also, feel free to DM me on Discord! I can help you get this sorted out in real-time.

[lindseydiloreto]

I've done some digging, and you are correct... there is currently a bug when using Sprig alongside of a map with info windows. This bug was introduced recently. And unfortunately, I won't be able to fix it before updating the plugin for Craft 4 compatibility.

As a short term solution, pin your version of the plugin to 4.1.4 exactly...

"doublesecretagency/craft-googlemaps": "4.1.4",

That should lock you to the last version before this bug was introduced.

Once I've updated the plugin to Craft 4, I'll take another look at resolving this Sprig conflict. Thanks for bringing it up! 👍

[drifteaur]

@lindseydiloreto great, the workaround works, thanks :)

[lindseydiloreto]

This is fixed in v4.2.3.

Go ahead and update when you get a chance, let me know if i missed anything. 👍

[wesleygooch]

@lindseydiloreto Is 4.2.3 still compatible with Craft 3? Thanks for looking into this.

[lindseydiloreto]

@wesleygooch It's not, sorry. Since v4.2.0, the plugin requires Craft 4.

[zizther]

For anyone looking to support Google Maps 4.2.5+ with Sprig this now requires the 'inline': true option in plugin, else the data being stored will be added to the bottom of the page which may likely be outside the sprig refreshed content.

{{ map.tag({
    'inline': true,
    'assets': false,
    'callback': 'mapReady'
}) }}

[lindseydiloreto]

Thanks for that note @zizther. 👍

Fortunately, the example component already includes {'inline': true}. You must have grabbed a copy between February 2022 (when Sprig support was added) and July 2022 (when the inline option was added).

To prevent other people from tripping over the same issue, I've added a note to the documentation...