CODEWITHSUNDEEP
javascriptajaxwordpressgoogle-mapsgoogle-maps-api-3
Logan C
Logan C

Reputation: 55

How To Display Content Based on Closest Lat/Long to Entered Address

I'm developing a job board type website for a client that has filters for the jobs posted. This website is built off of Wordpress and using the Ajax Load More plugin to dynamically populate the jobs. I want to have a filter that a user can enter their address and the closest jobs to that entered address would populate.

I currently have it set up to grab the latitude and longitude of each job posted, as well as, the latitude and longitude of the address when the user enters it, using the Google Maps API. What I can't figure out his how to correlate the two and have Ajax Load More populate the jobs with the closest lat/long to the entered address?

Upvotes: 1

Views: 756

Answers (2)

tomjosef
tomjosef

Reputation: 927

First, create an array that contains the lat/lng's of the job posted. Here's an example:

var job_locs = [ //job locations array
   {lat:59.611975, lng:16.547017},//within radius
   {lat:59.612186, lng:16.544901},//within radius
   {lat:59.614412, lng:16.538992},//within radius
   {lat:59.615677, lng:16.546703},//within radius
   {lat:59.618794, lng:16.545480},//within radius
   {lat:59.622650, lng:16.558984},//outside radius
   {lat:59.615612, lng:16.555962},//outside radius
   {lat:59.610812, lng:16.549959},//outside radius
   {lat:59.608804, lng:16.541045},//outside radius
   {lat:59.608084, lng:16.537515},//outside radius
];

As you can see there, I have provided 5 within the 500 meter radius of the user and another 5 outside the radius. Here's the user's location:

var user = { lat: 59.615911, lng: 16.544232 };

Now you just have to loop through the array of job locations and check if they are within the radius. To do this, there is a post about this here in SO: Check if a latitude and longitude is within a circle google maps if you check the accepted answer (credits to Guffa), he used this function to check if the point is within the radius:

function arePointsNear(checkPoint, centerPoint, km) { // credits to user:69083
   var ky = 40000 / 360;
   var kx = Math.cos(Math.PI * centerPoint.lat / 180.0) * ky;
   var dx = Math.abs(centerPoint.lng - checkPoint.lng) * kx;
   var dy = Math.abs(centerPoint.lat - checkPoint.lat) * ky;
   return Math.sqrt(dx * dx + dy * dy) <= km;
}

Now we use this function in a loop:

job_locs.forEach(function(locs){
      var n = arePointsNear(user, locs, 0.5); //0.5km = 500meters
      if(n){
         marker = new google.maps.Marker({
            map: map,
            position: locs,
            label: {
               text:"I", //marking all jobs inside radius with I
               color:"white"
            }
         });
      }else{ //remove this to see only the locations within radius
         marker = new google.maps.Marker({
            map: map,
            position: locs,
            label: {
               text:"O", //marking all jobs outside radius with O
               color:"white"
            }
         });
      }
   });

Note: This displays all the nearby locations from the list within the provided radius. If there are no location found within the radius, there will be no result. Also, please read the source of arePointsNear function, for the limitation of this function.

Here is a working sample in JS Bin: click me!

Upvotes: 4

Tien Liang
Tien Liang

Reputation: 245

What You Have

  • Latitude/Longitude of each job
  • Latitude/Longitude of user's address

What You Want

  • List of job post displaying by nearest location

Approach

  • Calculate the distance using formula in this page
  • Load list of jobs by the order of distance calculated

Upvotes: -1

Related Questions