Store Locator Address search field

[aptslatam]

Hi All,

Thanks for your support.

I am using the store locator to let people search for a location and change the display on the map, all is working great.

Is it possible to display the address location field on a separate web page or autofill this field from information taken from another web page field.

The use case is to present on the home page an address field which users can fill in and then when clicking search it directs them to the map page with the field already completed and the map focused accordingly. You can see what I mean looking at this website https://www.theapartmentnetwork.com/ where the homepage has a field to enter the location and then it forwards to the map page.

Any ideas appreciated.

Ben

[Dylan]

Hi Ben,

Thank you for getting in touch, we do appreciate your time.

Unfortunately, we don’t support separating the search form/fields at this point in time within the core plugin code.

However, we have assisted users in achieving a similar result using a bit of custom JavaScript to trigger a search when the map page is loaded.

The idea is to change the homepage search form to send it’s data directly to the map page. This is done by setting the forms action to the map page URL. The main search field would then need to have it’s name set to something like sl_query which our script can look for in the URL when the user performs a search.

Is this something you have control of for the homepage? If so, could you make those two adjustments to the homepage form so that I can write the custom JavaScript required to achieve the search trigger?

[aptslatam]

Hi Dylan,

Thanks for your assistance.

I have set up the form on my homepage aptslatam.com with the city field named sl_query, when the user clicks submit the form redirects to the webpage with the wpgmaps module: https://aptslatam.com/index.php/destinations-map/.

Do I need to add the sl_query field value (city) to this url so it can be used in the store locator search function?

Please let me know about the custom java script and where I need to add this.

Thanks again.

[aptslatam]

I can get the URL to report the following:
https://aptslatam.com/index.php/destinations-map/?sl_query=cali

Where Cali is the city that the user searched for.

[Dylan]

Hi Ben,

I just had a look at the setup and it all appears to be set up correctly for the next step.

Next, we need to add the custom JavaScript snippet to the system, please find a link to the Gist below:
– https://gist.githubusercontent.com/DylanCodeCabin/09488b0d09350dedfc3ebbcbc28375b7/raw/2998c98aa8a4cacdfd745ef2e8f08acde3f91207/SLQueryAutomator.js

You can go ahead and copy the contents of that link to Maps -> Settings -> Advanced -> Custom JavaScript.

Once saved, the system should automatically trigger a search when the sl_query URL parameter is set.

I hope this helps?

[aptslatam]

Hi Dylan,

Thanks I have added the custom script but it doesn’t seem to auto fill the store locator address field and change the map accordingly, any ideas?

The url is passing correctly I think:

>> https://aptslatam.com/index.php/destinations-map/?sl_query=bogota <<

Is there another setting in wpgmaps or Word Press that I need to activate?

Thanks,

Ben

[Dylan]

Hi Ben,

Thank you for getting back to me. I have had a look at the site and it appears there is a small issue with my script.

Please could I ask you to change the following:
$("input.wpgmza-address").val(address.replace(/+/g, ' '));

To this instead:

$("input.wpgmza-address").val(address);

I have also updated the Gist link for convenience. (https://gist.githubusercontent.com/DylanCodeCabin/09488b0d09350dedfc3ebbcbc28375b7/raw/c96db11bf0d288a62161726eafeebc8a56fff217/SLQueryAutomator.js)

[aptslatam]

Hi Dylan,

Thanks for your quick reply, this is now saving the sl_query to the address search bar of the store locator. Is it possible for the script to activate the search? At the moment you still need to click the search button to apply the search.

Many thanks,

Ben

[Dylan]

Hi Ben,

Only a pleasure, happy to help.

That is quite strange, the script does include a click simulation, meaning the click should occur automatically.

Please try replacing the following part of the script:

$(document.body).on("init.wpgmza", function(event) {
  setTimeout(function(){
      $("input.wpgmza-search").click();
  }, 3000);
});

With this instead:

$(document.body).ready(function(event) {
  setTimeout(function(){
      $("input.wpgmza-search").click();
  }, 3000);
});

I believe the event binding may be failing for the map initialization. I believe the solution above will allow the document to control the trigger for the button click.

I hope this helps.

[aptslatam]

Hi Dylan,

Thanks again for your help.

I believe that this is a performance issue. When I delete all 500+ markers the code works and applies the search. I then imported the markers again and changed the timeout value to 9000 from 3000 and it worked.

How can I improve the load time on the map with my 500 markers? When running the script it appears that the map loads all the markers and then reloads the page to focus on the destination searched for.

Thanks again,

Ben

[Dylan]

Hi Ben,

Thank you for getting back to me, and sharing the additional information with me.

Yes, I must have overlooked the timing issue here. Although it is possible to improve the initial map load times with tools like WP Rest Cache, I believe fundamentally the script needs to be changed to better support the load order, and execution of events.

I have updated the script here: https://gist.github.com/DylanCodeCabin/09488b0d09350dedfc3ebbcbc28375b7

This should now wait for the initial markers to finish their placement, once the markers are placed, the search should fire automatically.

I believe that should allow the order of the events to fire correctly. 🙂

[Author]

Posts