Untitled

{# ID of the dynamic map #}
{% set mapId = 'my-sprig-map' %}

{# Configure map options #}
{% set mapOptions = {
  id: mapId,
  height: 360
} %}

{# Set default values if not defined #}
{% set target = target ?? 'Los Angeles' %}
{% set range = range ?? 50 %}

{# Configure proximity search options #}
{% set searchOptions = {
  target: target,
  range: range
} %}

{# Conduct the proximity search #}
{% set locations =
  craft.entries().section('dealership').maps(searchOptions).orderBy(
    'title'
  ).all()
%}

{# Search input, range select, and button #}
<form sprig>
  <div class="flex">
    <input type="text"
      name="target"
      value="{{ target }}"
      placeholder="Enter a city or postal code..."
      class="grow px-3 py-2 border border-gray-300" />
    <select sprig name="range" class="ml-2 px-3 py-2 border border-gray-300">
      <option value="10" {{ 10 == range ? 'selected' }}>
        within 10 miles
      </option>
      <option value="25" {{ 25 == range ? 'selected' }}>
        within 25 miles
      </option>
      <option value="50" {{ 50 == range ? 'selected' }}>
        within 50 miles
      </option>
      <option value="100" {{ 100 == range ? 'selected' }}>
        within 100 miles
      </option>
    </select>
    <button type="submit"
      class="ml-2 px-6 py-2 text-white bg-green-700 rounded">
      SEARCH
    </button>
  </div>
</form>

{# Map and search results #}
<div class="flex mt-2">
  <div id="search-results" class="w-1/3 pr-2">
				{% for location in locations %}
					<div>
          <p class='font-bold text-xl' id="{{location.title}}">{{location.title}}</p>
						<p>{{location.maps.street1}}</p>
						<p>{{ location.maps.countryCode}}-{{location.maps.zip}}
							{{location.maps.city}}</p>
            {% if location.phone %}
						<a class="" href="tel:{{location.phone}}">{{location.phone | replace("-", " ") | slice(4)}}</a><br/>
            {% endif %}
            {% if location.email %}
						<a class="" href="mailto:{{location.email}}">{{location.email}}</a><br/>
            {% endif %}
            {% if location.website %}
            <a class="text-gray-300" href="{{location.website}}" target="_blank">{{'Website'}}</a>
            {% endif %}
					</div>
				{% endfor %}
  </div>
  <div id="map" class="w-2/3">
    {# Enabling `inline` keeps important JS right next to the map #}
    {{
      googleMaps.map(locations, mapOptions).tag({
        inline: true
      })
    }}
  </div>
</div>

{# Reinitialize the map after Sprig loads fresh HTML #}
{% if sprig.isRequest %}
  <script>
    googleMaps.init('{{ mapId }}');
  </script>
{% endif %}