Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sprig filter with a Google Map

See original GitHub issue

Question

I have a Google Map within a Sprig component that loads fine until I apply a filter. The map still loads but it covers the browser window and doesn’t show the updated results. Am I missing something on the filter to allow it to work with the map? I’m using the beta version of SmartMap which appears to be working fine until a Sprig filter is applied.

Here is a stripped down version of the code showing a couple of filters and the map.

<div s-replace="#jobListings">

    <div id="pageTitle" class="d-flex align-items-end px-2 py-3 mb-3 text-white bg-purple rounded shadow-sm">
        <div class="col px-2">
            <small><i class="bi bi-funnel"></i> DRIVER TYPE</small>
            <select sprig id="driverType" name="driverType" class="form-select" aria-label="-Select-">
                {% for option in driverType.options %}
                    {% set selected = entry is defined
                        ? entry.driverType.value == option.value
                        : option.default %}
                    {% set driverType = option.value %}
                    <option value="{{ driverType }}"{% if selected %}selected{% endif %}>
                        {{ option.label }}
                    </option>
                {% endfor %}
            </select>
        </div>
        <div class="col px-2">
            <small><i class="bi bi-funnel"></i> TRUCK TYPE</small>
            <select sprig id="truckType" name="truckType" class="form-select" aria-label="-Select-">
                {% for option in truckType.options %}
                    {% set selected = entry is defined
                        ? entry.truckType.value == option.value
                        : option.default %}
                    {% set truckType = option.value %}
                    <option value="{{ truckType }}"{% if selected %}selected{% endif %}>
                        {{ option.label }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </div>

    <div id="jobListings">
        <div class="col-sm-12 my-4">
            {# Get all locations #}
            {% set locations = craft.entries.section('jobs').all() %}

            {% set options = {
                id: 'my-map',
                height: 300,
                zoom: 6,
                draggable: false,
                markerOptions: {
                    icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
                },
                infoWindowOptions: {
                    maxWidth: 200
                }
            } %}
            {% set map = googleMaps.map(locations, options) %}
            {{ map.tag() }}

        </div>
    </div>
</div>

{{ sprig.script }}

<script>
    htmx.on('htmx:afterSwap', function(event) {
        googleMaps.init('my-map');
    });
</script>