Building a Real-Time Bus Map for NOLABeerBus.com

So… In 2023, I built a custom WordPress plugin to track a beer bus in New Orleans. 🍻🚌
Yup, that’s real. It’s called the NOLA Beer Bus, and it shuttles folks around the city’s best breweries. Think of it like a hop-on-hop-off tour — but for craft beer lovers.

The site needed something more than just a list of stops. They wanted a live, interactive map where people could see:

• Exactly where the bus is (in real time)
• Which breweries are part of the route
• And only show the bus during actual operating hours (Thursday–Sunday, 12–8 pm)

And it all had to work inside WordPress.

🍺 What They Needed

• A mobile-friendly map with brewery stops
• A moving bus marker with real-time tracking
• A route line between stops
• A “Refresh Bus Location” button
• Automatic logic to hide the bus when the service is offline
• Admin-friendly controls — no code required

Also: the live tracking data came from an external API that blocked direct JavaScript access (👋 CORS).

✨ What It Looks Like on the Site

Here’s a preview of the live map on nolabeerbus.com:

It updates in real time while the bus is running, and users can tap Refresh Bus Location to get the latest position.

🔧 What I Built

A custom WordPress plugin that:

• Uses the Google Maps API for custom markers and route rendering
• Lets admins drop in brewery stops via the WordPress dashboard
• Builds route lines using Google’s DirectionsService
• Shows or hides the bus icon depending on business hours
• Uses a PHP proxy to securely fetch real-time data from an external API without tripping CORS issues

Basically, it’s a dynamic Google Map tailored to a very New Orleans need: tracking a party on wheels.

The CORS Workaround

The location API wouldn’t allow JavaScript to fetch the data directly due to CORS restrictions.

Solution: I built a PHP proxy that:

• Uses cURL to securely call the third-party API from the server
• Sends the location data to the front-end in a clean format
• Keeps the API key safe and hidden

⚙️ Admin Panel = Client-Friendly

The plugin includes a WordPress settings page that lets the team:

• Add/edit brewery locations
• Set or adjust business hours
• Build route options with dropdowns
• Toggle the visibility of the bus icon
• Paste in a Google Maps API key
• Control everything without touching code

Everything is built using standard WordPress APIs, so it’s simple to maintain.

🚀 The Final Result

Instead of a static list or outdated map, NOLABeerBus.com now has:

• A live, interactive brewery map
• A bus marker that appears only when the bus is actually running
• Admin controls that are easy to manage
• A better experience for tourists and locals alike

Final Thoughts

This is one of my favorite builds. It’s quirky, hyper-local, technically challenging, and just plain fun.

The best part? It all started with a simple request:

“We want a little icon showing where the bus is… but only if we’re open.”

Got a similar idea? Real-time data, maps, or custom WordPress tools?
Let’s talk.

🕊️ Note: The NOLA Beer Bus officially closed in June 2025. This post reflects the work I did while it was active, and I’m proud to have been part of it.