Filter by distance - Support Fourms

This topic has 5 replies, 2 voices, and was last updated 11 months ago by alessi0santoro.

Creator

Topic
July 16, 2020 at 3:09 AM #20785

Resolved alessi0santoro
Participant

Hello

How do I:

1 ) have a front end google api field that gives me latitude and longidute

2 ) how do I filter my wp query by distance from the location indicated in the field on question 1?

case use:
My client has some houses and each house has an address.
visitor insert a city and the wp query filters the results and shows only the houses near that city (the distance is not important now, lets say 50km)
Creator

Topic

Viewing 5 replies - 1 through 5 (of 5 total)

Author

Replies
July 16, 2020 at 9:42 AM #20788

Long Nguyen
Moderator

Hi,

The extension Meta Box Geolocation helps you enter an address then it will autosuggest a complete address and fill all other fields. In your case, I think you need to calculate the distance first, find the house (post) that has the shortest distance then show it on the map.

Links below will help you to achieve your goal.
https://stackoverflow.com/questions/29003118/get-driving-distance-between-two-points-using-google-maps-api
https://metabox.io/display-all-listings-on-a-map/

July 16, 2020 at 3:25 PM #20795

alessi0santoro
Participant

I am sorry but how can I use the geolocation extension on the front end? I successfully installed on the backend but how can I add a text field that autopopolate latitude and longitude fields with google API on the front end?

thank you in advance, always really helpful and fast

July 16, 2020 at 7:08 PM #20803

Long Nguyen
Moderator

Hi,

You can use the extension MB Frontend Submission to use fields and extensions on the frontend. For more information, please follow this documentation https://docs.metabox.io/extensions/mb-frontend-submission/.

July 16, 2020 at 10:07 PM #20812

alessi0santoro
Participant

Ok thanks,

The front end form shows all the fields, in order to show only the address field is there a clean way to hide the others or I have to use css/javascript?

July 17, 2020 at 12:16 AM #20813

alessi0santoro
Participant

Ok i succeded by:

1) creating an input with autocomplete with
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

2) taking some of the code and ideas from
https://stevepolito.design/blog/create-a-proximity-search-in-wordpress/

have a nice day!
Author

Replies

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.