Untitled
unknown
plain_text
a month ago
2.6 kB
3
Indexable
Never
{# 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 %}
Leave a Comment