Background
As a web developer, you tend to find areas where a theme designer may have skipped implementing certain functions. This isn’t done to be exclusionary or ill-spirited, but merely due to the fact that themes tend to be very robust. Issues take certain priorities, and you can’t always do every little thing to make all of your customers happy. I have a client who needed a slick classifieds website to be built, and we ended up agreeing on a great theme by scriptsbundle called AdForest. It’s a quality WordPress theme that is packed with tons of great features! I highly recommend any theme by this author, as it’s quality code.
The Dilemma
Although most of the world is on the Metric system, the United States has remained resilient in using the Imperial system. The theme author has a lot of options for the radius search, but unfortunately didn’t include a way to change the unit of measurement from kilometers to miles. Here’s a screenshot of what I’m talking about:
I basically needed to locate two different files to accurately change the Javascript code, and then also make sure the front-end form showed “Radius in miles” instead of “Radius in km.”
Map.js
While using the Google Maps API, all radius distances are in meters. In order to change the value from meters to miles, you need to do a simple math conversion. To convert meters to miles, you simply take the mile value entered in the radius input and multiply it by 1609.344. So, a 5-mile radius would equal 8,046.72 meters. Here’s the code change:
Original code:
var radius = parseInt(km, 10)*1000; //Returns value in Kilometers. This was original config.
Changed to:
var radius = km*1609.344; //Returns value in Miles. This works better for US customers.
Note: I decided to keep the “km” variable named the same, only because it was changed in multiple areas and I wanted to minimally impact the code base.
Conclusion
I ended up editing the file responsible for displaying the the “Radius in km” and changed it to “Radius in miles.” The form now strictly displays the form data in mileage, and can easily be reverted back to kilometers in the future (if the need arises). I’m currently looking to implement the ability for the user to select kilometers or miles, and I’ll post an update when I’ve completed that project. Thanks for reading!
