Site wide search + Map Location Input

Ask the community
2

Site search: there’s no feature in Softr for searching the whole site. I would not be too optimistic about hacking something like that. I get stuck trying to think about a couple of hard problems to solve: 1) how to search both the static content that’s defined in Softr, and the dynamic content that’s stored in Airtable; and 2) when search results come back, how to map them to pages. I think if it were acceptable to search only the Airtable data, then you might be able to get something cobbled together that makes a call out to a Make scenario that calls the Airtable search APIs and then returns record IDs back to the browser. But again, I’m not optimistic.

Google Map address autocomplete: yes, that’s doable. Here’s a bit of custom code that you can play with. Add this code to the Code Inside Footer of a page:

<script>
    const interval = setInterval(function() {
        if (typeof google === "object") {
            clearInterval(interval);
            var input = document.getElementById('searchTextField');
            var autocomplete = new google.maps.places.Autocomplete(input);
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                var place = autocomplete.getPlace();
                document.getElementById('city2').value = place.name;
                document.getElementById('cityLat').value = place.geometry.location.lat();
                document.getElementById('cityLng').value = place.geometry.location.lng();
            });
        }
    }, 500);
</script>

Then add a custom code block with this in it:

    <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />  
    <input type="hidden" id="city2" name="city2" />
    <input type="hidden" id="cityLat" name="cityLat" />
    <input type="hidden" id="cityLng" name="cityLng" />

Things to know:

  • When you start typing a place in the location field, you’ll get a list of autocomplete choices, and then when you pick one, the hidden fields will get filled in with the data you are looking for.
  • You’ll need to figure out how to get those fields into a form that the user can fill out - I haven’t thought about this particular piece of the puzzle yet.
  • For reasons I don’t understand, the above only works on a page that does not have a Map block on it. When the page has a Map block on it, I see errors in the browser console, which I didn’t try to track down.
2 Likes