Site wide search + Map Location Input

Hi, we run into 2 limitations while using soft, not sure if they belong better to the feature quest section, I want to ask the community first to see if people know the answer.

Is there a way to add a global search field block to the softr web app? The current block options only allow us to append a search bar along a list. We’d hope to just have a search that can link to one or more airtables without displaying list of items/product below.

Another question is about the map block, it is crucial for us to display a map of user-generated content. The problem we run into is the only acceptable location data are longitude and altitude, which is way too technical for people to input their location data. We’d love to let users input human-readable location data, and have it displayed on the map. Is there any solution or existing API that Softr can offer to solve this problem?
PS: we have tried the google geolocation converter API for airtable through data fetcher / miniextensions. this is an overkill and a lot of trouble for us. It would be a lot easier if softr just offers location input for the maps. Before I submit it as a feature request. I want to see if it’s doable as of now.

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

Hi @dcoletta Thank you very much for your help! I just tried the method for the Google map and it worked pretty well.
and as you mentioned earlier, I am stuck on how to get the field in the Softr Form. I have tried directly posting the location data to Airtable via REST API (method HERE) but the data posted is separated from the softr form.
I also tried to see if I can directly modify a softr field, making it sending lat and long data along the rest fields. however, the dynamic form is a iframe itself, which prevents me from getting access to its children.
My followup question would be: is there anyway to get the div element from a form? in this instance, I want to get the “Address” and “Submit” fields so I can add custom JS.
Screen Shot 2022-12-13 at 10.31.01 PM

This helped tremendously. I was slowly adding the pieces and thought, :thinking: I wonder if something similar is on the Softr community.

And yes! Thank you!!!

1 Like

Hi @alfance , I’ve posted details here to how I’ve hacked together a site wide search. It is limited to searching Airtable only, but it might get you going in the right direction if you haven’t already found another solution.