How to show the office locations nearest to a user

We look at a recent client implementation for showing their office locations nearest to a website visitor. We cover topics such as location tracking and integrating with APIs that return JSON data.

location marker on buildings in a city scape

The Client Requirements

Our client, The Learning Experience, runs day-care centers all over the US, and they operate primarily in a franchisee model. The redesign of the website required that we should first check the user’s location

the learning experience web page

and then show day care centers within a 25-mile proximity:

the learning experience page with geo targeting

When the user clicks on a center, we show them a lot of details about the center: facilities, team, events, photos and such.

geo targeted options on the learning experience web site
testimonials page

From a technical perspective, there were several key constraints. The Learning Experience has a central system where all the franchisees log in to update their information (photos, events, programs, promotions etc). The website would have to integrate with this system to get the center details in real-time.

The Solution Architecture

The website was built on the WordPress platform, and hosted on WPEngine. A key aspect of the website architecture was the use of the Divi Builder.

wordpress page architecture using divi page builder

The Location Tracking Architecture

First, the franchisee centers were modeled as Advanced Custom Fields.

location tracking architecture in wordpress
more settings in wordpress

Then we used a popular plugin called “Geo my WP” that can point to these office locations and automatically provide location tracking capability.

Geo my WP plugin
Geo my WP plugin settings

The Integration Architecture

Since all the franchisee center information is administered in a back-end system, the center detail page had to get the data in real-time via an API call that returned JSON.

integration architecture for geo mapping on learning experience

Similarly, we needed to create a cron job that would run on a daily basis and call an API that would return a JSON with the list of all centers along with their addresses. This JSON would be parsed and imported into the Advanced Custom Fields.

franchise geo tagging on the learning experience page

If your looking for further site personalization or making your website geo personalized. You can check out the related posts below.

No items found.

Related Insights

Site Personalization in WordPress

In an earlier post, we had introduced the fundamentals of site personalization. In this post, we will take a specific usecase and see how to implement it in WordPress.

Vinod Pabba


Introduction to Site Personalization

We introduce the three pillars of site personalization : Site components, Incoming state of a visitor and Behavior in the active session. We then formulate a usecase to illustrate these ideas and implement them in multiple CMS platforms such as WordPress, Drupal, AEM, Kentico and others.

Vinod Pabba


Making your dynamic data location-aware

Many websites have dynamic data entities (offices, employees, experts) that need to be location-aware. When a user in a certain physical location comes to the site we need to show only the data is closest to them (the closest office, the nearest employee, experts within a 25-mile radius). We discuss generic approaches to accomplish this.

Vinod Pabba


Subscribe to our newsletter