Searchable Map Template using Google Maps and Fusion Tables
JavaScript PHP
Switch branches/tags
Nothing to show
Pull request Compare This branch is 9 commits ahead, 149 commits behind derekeder:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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.


  • 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


  • Google Fusion Tables

  • Google Maps API V3

  • jQuery


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

  1. Create a Fusion Table (here's a great tutorial:

  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:

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


Fusion Tables


Reference Guides

More detail needed?

Contact me via email! Derek Eder

Errors / Bugs

If something is not behaving intuitively, it is a bug, and should be reported. Report it here:

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 © 2012 Derek Eder. Released under the MIT License.

See LICENSE for details