A Quick Hack with Google Fusion Tables and Geolocation

My wife was recently tasked with putting out signs for a consignment sale at our son’s preschool. Lots of them.

She showed me what they’d used in the past – A document with step-by-step directions from one location to the next and what kind of sign to place there. While this would have worked fine, it made it very hard to split up groups of folks to go and place specific types of signs.

So, thinking there had to be a better way, I sat down to see what I could to do make this easier for her. In just an hour or so I was able to come up with what seemed like a much better solution.

I used Google Fusion Tables to create a row for each sign location. Fusion tables is great because it will automatically geocode most things you throw at it – in my case cross streets (Pierce & Chatfield).

With just a few lines of code I could easily see all of the places where signs needed to be.

That was good, but what she really needed was a way to show only certain types of signs on the map for a specific group to place. I added a simple select element that changed the query parameters sent to the Fusion Tables API which automatically updated the overly.

<select id="sign-select">
    <option value="arrow=1">Arrow</option>
    <option value="info_arrow=1">Info Arrow</option>
    <option value="info=1">Info</option>
    <option value="">All</option>

$('#sign-select').on('change', function () {
    var options = {
        query: {
            select: 'Location',
            from: '1hSKp4BbrAUikm8H5k_deWghrrmaYupYE4phdAks',
            where: $('#sign-select').val()

Cool, now we know where the locations are and what we need to place there, but where am I? With the native geolocation capabilties now found on most mobile browsers I could easily tap in and get a very precise location and show it on the map.

Still, this could be better. Instead of using the getCurrentPosition method, I opted to use the lesser known watchPosition. This constantly polls the device for an accurate location (at the cost of battery life) so that a moving marker could be shown on the map to help the navigator.

watching = navigator.geolocation.watchPosition(locateSuccess, locateError, {
    enableHighAccuracy: true,
    timeout: 10000,
    maximumAge: 0

The final product is here. I’ve also made the source code available. It’s pretty sloppy and probably has a few bugs, but for a last minute project I was happy with the outcome.