Become a MacRumors Supporter for $25/year with no ads, private forums, and more!

Map issue HTML5 & CSS3


macrumors newbie
Original poster
Apr 12, 2014

I am trying to create a interactive map. From a certain place e.g a business and for a circle for the radius, which has been set. From this the user can enter their postcode and find whether an item can be delivered to their address and display on the map that they are outside the area the item is delivered.

Any help will be much appreicated:D


macrumors member
May 3, 2012
I would take the following steps:

1. define the business GPS coordinates (check Google Maps)
2. find a way to translate the customer's postal code or address into GPS coordinates
3. calculate the distance between the two GPS coordinates and compare it with your pre-defined radius. Inform the customer it's outside the area if needed.
4. if you want to also display this in a graphical manner, you can try Google Maps again or create your custom solution

In this moment, for me it looks like point 2 is the biggest unknown and maybe hardest to implement as I never did this.

The others are pretty easy.

Good luck!


macrumors 65816
Apr 30, 2004
Around the World
As mentioned above, it's all about geo-coding and reverse geo-coding. Both can be done, at least with Google Map API.

The basic idea is that you take a civic address (or postcode), use the API to translate it to longitude and latitude, take your business longitude and latitude, use the matrix to calculate the distance between your business and the user's address (or postalcode), check if it's within your range and then, if need be, translate the location (longitude and latitude) of the nearest location back to regular civic address and return it to the user.

Long story short, your calculations must be done in longitude and latitude. So you must translate all your civic addresses (your own and the one entered by the user) since that's the easiest (only?) way to calculate the distance between to point.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.