WordPress Website using Geolocation API
Updated: Nov 25
Technologies: WordPress, PHP, MYSQL
Project Overview & Objective:
To build a simple WordPress website for the client which displays all the services provided for Architecture, Engineering, Construction, and Manufacturing industries. Users can view and enquire about the services and then submit their requirements using a form.
Reason for chosen technologies:
It's a single-page business website with dynamic functionalities and hence WordPress was suggested which makes the website easier to customize and it also improves performance.
Challenge: Based on user location, display the nearby branch details
Solution:
Using GEOLOCATION API, the latitude and longitude position of the user is fetched.
Using GEOCODING API, the Latitude and longitude value is converted to the human-readable format location details. With these details STATE of the user is then determined..
The details of latitude, longitude, and all the other city and state details of the Offices are stored in our backend as a JSON file.
The distance between the User’s lat/lng value and the Offices’ lat/lng value is then calculated using jQuery.
The distances fetched from the jQuery code are then checked to confirm if it is in the given radius or not.
We now have 2 scenarios:
The Office is within the radius of the user and it's in the same state.
Using jQuery code to compare the city name (which is derived from GEOCODING API code) with the city name (from the backend JSON file) and displaying the details (Flag of the city, Office Address, etc)
The Office is within the radius of the user but is in a different state.
A function is created in jQuery to get the nearby three location names that are closest to the user.
Then another function is created by passing these office location names to display details of those locations.
Then again the STATE of the user(which is derived from GEOCODING API code) and STATE of the Office location (from the backend JSON file) and displaying details (State Flag and presented number) are compared.
Then to get the address details of the office locations, again a jQuery code is used to compare and fetch the details of those 3 office locations from the JSON file.
Challenge: Fetching user location details and display it in an email template
Solution:
When a user submits a form on the website, with the help of GEOLOCATION and GEOCODING API the user's location details like City/State, etc are collected.
Challenge: Fetching Flags according to the user’s location and selecting the location by the user
Solution:
The flags are displayed using jQuery and GEOLOCATION and GEOCODING API in the flag section.
Challenge: Display Banner Title in email format
Solution:
This is a single-page website that has a dropdown with a list of Services provided. Using Jquery, the banner title is changed when the user selects a service from the dropdown. When the user sends an email to the client, the client gets an email with the details of the service selected by the user.
Challenge: Display Timezone of the User in email format
Solution:
Using TIMEZONE API, the User’s timezone is fetched and displayed in the email.