Fusion Table Searchable Map Template¶ ↑

You want to put your data on a searchable, filterable map. This is a free, open source tool to help you do it.

• Demo: derekeder.com/searchable_map_template/demo/index.html

• More info and examples: derekeder.com/searchable_map_template/

Features¶ ↑

• clean, full screen layout

• address search (with variable radius)

• geolocation (find me!)

• results count (using Google’s Fusion Tables API)

• ability to easily add additional search filters (checkboxes, sliders, etc)

• all done with HTML, CSS and Javascript - no server side code required

Dependencies¶ ↑

• Google Fusion Tables

• Google Maps API V3

• jQuery

Setup¶ ↑

Follow the steps below and you’ll be in business with your own map

1. Create a Fusion Table (here’s a great tutorial: support.google.com/fusiontables/bin/answer.py?hl=en&answer=184641)

2. Make sure at least one column is set to a type of Location and that FT has geocoded it

3. Set the Fusion Table to be publicly visible (via the Share button in the upper right)

4. In source/maps_lib.js, set your

   1. fusionTableId to the ID of your Fusion Table (there’s one at the bottom of index.html too)

   2. locationColumn to the name of your location column in your Fusion Table

   3. map_centroid to the lat/long you want your map to center on

   4. locationScope to the area you want to limit searches to (set to ‘Chicago’ by default)

   5. recordName and recordNamePlural to the name of the items in your Fusion Table

5. Optional Add/modify additional search filters to the doSearch() function (maps_lib.js line 59). This will depend on the data you are trying to map. I put in one example of filtering by a type column. You can see additional examples of these by viewing the source on any of these:

   • chicagobuildings.org

   • derekeder.com/maps/chicago-bike-crash-reports/index.html

   • derekeder.com/maps/chicago-tif/index.html

6. Upload this map and all the supporting files (source and styles folders) to your site

Resources¶ ↑

Fusion Tables

• www.google.com/fusiontables/Home

Community

• Fusion Tables Issue Tracker - code.google.com/p/fusion-tables/issues/list

• Fusion Tables Google Group - groups.google.com/group/fusion-tables-users-group

Reference Guides

• Google Maps API - code.google.com/apis/maps/documentation/javascript/overlays.html#FusionTables

• Fusion Tables API Developer Guide - code.google.com/apis/fusiontables/docs/developers_guide.html

• Fusion Tables API Reference Guide - code.google.com/apis/fusiontables/docs/developers_reference.html

More detail needed?¶ ↑

Contact me via email! Derek Eder [email protected]

Errors / Bugs¶ ↑

If something is not behaving intuitively, it is a bug, and should be reported. Report it here: github.com/derekeder/FusionTable-Map-Template/issues

Note on Patches/Pull Requests¶ ↑

• Fork the project.

• Make your feature addition or bug fix.

• Commit, do not mess with rakefile, version, or history.

  • (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)

• Send me a pull request. Bonus points for topic branches.

Copyright¶ ↑

Copyright © 2012 Derek Eder. Released under the MIT License.

See LICENSE for details github.com/derekeder/FusionTable-Map-Template/wiki/License