What's going on here?

Back in the day when I was working for Family Video (the last video chain standing, RIP January 2021), I spent a weekend coming up with a store locator. At the time, we just had a list with stores by state/city. I wanted to write a searchable by Postal Code, map-based solution. Took the weekend, but I ended up with a solution I ported to work on the following Monday.

Since Family Video stores are now closed - and there is no need for a map - no one can see what I came up with.

So, I recently rebuilt the tool in Google Maps API v3 (the other one was v2). The result is above.

Why? For fun and to show off. Was a lot of busy work, and I've forgotten more about the Maps API than I remember. It was good to hack it again.

Tools and choices for this exercise:

• I had MySQL data with stores/locations (lat/lon). Note - since the stores are closed, I do not show phone numbers. In the original tool, phone numbers were, of course, included.
• Written with MySQL, PHP (v7 compliant), CSS, Google Maps API v3. While a fan of separate style sheets, I've embedded the styles here just to make this page more portable. All one needs is the database tables and the one file.
• Starts off centered on the former Family Video headquarters in Glenview, IL (now Highland Ventures, Ltd - same owners).
• The Haversine Formula (good PHP/MySQL example) is used to calculate the stores at a radius distance (in miles) from a given Postal Code. I have a table of approximately 42k Postal Code lat/lon combos. If a user enters an unknown Postal Code, the code tries to find the closest code above and then below the entered number. Radius/stores found are based on the final Postal Code entered/calculated. Initial zoom level set programmatically based on search radius (large radius, zoom out, for example).
• Entering a Postal Code will then center the map on that Postal Code's lat/lon, results or not.
• JS onChange event if radius changes, to quickly (and easily) expand/contract search radius.
• Click in marker to get data for that store (also presented in left-hand rail); click in address in the left-hand rail to have that store shown on map centered and zoomed in on.
• A lot of the regular error-trapping a production tool would have is missing here: make sure store is not closed, the open date is not in the future, display address 2 if it exists and so on. That can be added for any dataset. This is just to show the functionality.

This is far from the world's greatest web-based tool, nor is it in any way unique - it's a feature of most brick-and-mortar stores' websites. However, it reflects quite a bit of work with some polish. That's what makes the web fun: You get an idea and run with it. Many googles later, you have somthing to show for it.

And I learned a bit, which is the main reward to me. It was frustratingly fun!

Back to Geistlinger.com