How To Display Content Based on Closest Lat/Long to Entered Address
As a web developer, one of the common challenges you may face is displaying content on your website or application based on the user's geographic location. Whether it's showing nearby job postings, local events, or store locations, being able to accurately determine the proximity of content to the user's location is crucial for providing a personalized and relevant experience.
In this blog post, we'll explore a step-by-step approach to displaying content based on the closest latitude and longitude coordinates to the user's entered address. We'll use a real-world example of job postings to demonstrate the process.
Step 1: Create an Array of Job Locations with Latitude and Longitude
Let's start by creating an array that contains the latitude and longitude coordinates of the job postings. Here's an example:
var job_locs = [
{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
];
In this example, we have 10 job locations, with 5 of them within a 500-meter radius of the user's location, and the other 5 outside of that radius.
Step 2: Determine the User's Location
Next, we need to get the user's location, which we'll store in the user
object:
var user = { lat: 59.615911, lng: 16.544232 };
Step 3: Calculate the Distance Between the User and Job Locations
To determine which job locations are within the specified radius of the user's location, we'll use the arePointsNear
function, which was originally posted on Stack Overflow by the user "Guffa". This function calculates the distance between two points on the Earth's surface using the Haversine formula.
function arePointsNear(checkPoint, centerPoint, km) {
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;
}
Step 4: Loop Through the Job Locations and Display Markers
Now, we'll loop through the job_locs
array and use the arePointsNear
function to determine which locations are within the 500-meter radius. We'll then display markers on a map for the locations that are within the radius.
job_locs.forEach(function(locs){
var n = arePointsNear(user, locs, 0.5); // 0.5km = 500 meters
if(n){
marker = new google.maps.Marker({
map: map,
position: locs,
label: {
text:"I", // marking all jobs inside radius with "I"
color:"white"
}
});
}else{
marker = new google.maps.Marker({
map: map,
position: locs,
label: {
text:"O", // marking all jobs outside radius with "O"
color:"white"
}
});
}
});
In this code, we loop through the job_locs
array and check if each location is within the 500-meter radius using the arePointsNear
function. If the location is within the radius, we create a marker on the map with a label of "I" (for "inside"). If the location is outside the radius, we create a marker with a label of "O" (for "outside").
Putting It All Together
Here's a working sample of the code in JSBin:
Click me to see the working sample!
This sample demonstrates how to display job locations on a map based on their proximity to the user's entered address. The key steps are:
- Create an array of job locations with latitude and longitude coordinates.
- Determine the user's location.
- Use the
arePointsNear
function to calculate the distance between the user and each job location.
- Display markers on the map for the locations that are within the specified radius.
By following this approach, you can easily adapt the code to display any type of content based on the user's geographic location, whether it's job postings, events, or local businesses. The ability to provide location-based content is a valuable feature that can greatly enhance the user experience and engagement on your website or application.
Flowpoint.ai can help you identify the technical errors that are impacting your website's conversion rates and provide AI-generated recommendations to fix them, ensuring that your users have a seamless experience when interacting with your location-based content.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.