Locale Maps

Ian Sagabaen
Aug 14, 2017 · 3 min read

I belong to a church with different locations all over the world. Convenient in its own right is the quad-annually print-published form of a list of these chapels worldwide, but sometimes the information would be incorrect. My wife & I maintained a spreadsheet of different chapels we visited, & shared the information with family who needed it. Locale Maps was born with this in mind: I created a mashup with Google Maps to plot these addresses on a map so fellow church members didn’t have to play phone/email/message tag with each other to find this information.

Although Google Maps & Spreadsheet were Google products, this mashup required a third outside service to serve the maps for these first builds. This could possibly be achieved with someone with some intermediate development background, but coding is not (yet) one of my stronger suits.

The first version was born with just a few map points & an outputted Google Map served by a mashup development tool called Map Builder; perfect for Google Maps API dummies such as myself. Although this didn’t work with my Google Spreadsheet, the service did exactly what I needed: to serve my own custom map markers. Map Builder output the map in a fixed iframe window, & I just centered it on a styled page:

The map service would choke at the volume of points it needed to plot, so I had to group them into manageable numbers, splitting them into regions (US West, US Midwest, Australia, etc.). I would have avoided this if I could, as it provided a burden — one or two more clicks — for the user.

I wanted to focus mainly on the map as the main feature of this tool, so naturally, I would want the iframe to fill the whole screen. These map mashup tools provided an iframe link, but since you can’t alter its contents, it was hard to manipulate the iframe to resize.

I finally found a new service that worked directly with my existing Google Spreadsheet called Map A List. It handled the volume of map points a bit better than Map Builder, so I could finally get rid of the region select dropdown.

Eventually, I figured out how to scale that iframe to fill the browser window. I needed some space, however, to attach the branding & the necessary links, but didn’t need more than 80px of the top of the page. I’ve become much more happy with this solution, which actually serves as my backup page in case the live page goes down.

I realized that I couldn’t build this exactly to my liking by myself. I’ve reached out to a few Craiglist developers, hired them, & worked with them remotely to help me realize my visions. My developer highly recommended (amongst other developers) to migrate all of my Spreadsheet data over to a more stable MySQL database.

To celebrate the new site, I designed a new new look & logo, as well as added some of the features I’ve been wanting, namely the search function.

What’s in the future for Locale Maps? Likely, a mobile version of the site, but it depends on what the audience decides.

Visit Localemaps.com »

Ian Sagabaen, Product Designer

The portfolio & work of Ian Sagabaen, Product Designer.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store