Map issue HTML5 & CSS3

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!

You can use Google Maps Geocoding to convert a postcode into a co-ordinate.

https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

You can then use the Distance Matrix API to calculate the distance.

https://developers.google.com/maps/documentation/distancematrix/

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.