top of page
Search

WordPress Website using Geolocation API

Updated: Nov 21, 2022




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.


  • Chall