Searchable Map Template using Google Maps and Fusion Tables
Switch branches/tags
Nothing to show
Pull request Compare This branch is 134 commits behind derekeder:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
source
styles
.gitignore
README.rdoc
index.html

README.rdoc

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.

Features

  • clean, full screen layout

  • new mobile and tablet friendly using responsive design

  • address search (with variable radius)

  • geolocation (find me!)

  • results count (using Google's Fusion Tables v1 API)

  • new RESTful URLs for sharing searches

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

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

Dependencies

Setup

This template is now supports the Fusion Tables v1 API. For more info on this, see developers.google.com/fusiontables/docs/v1/migration_guide

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. Turn on the Fusion Tables API in the Google APIs Console: code.google.com/apis/console/

  5. In source/maps_lib.js, set your

    1. fusionTableId to the encrypted ID of your Fusion Table. Note: Google is phasing out numeric IDs soon

    2. googleApiKey to the API key from your Google API Console: code.google.com/apis/console/

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

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

    5. locationScope to the area you want to limit searches to (set to 'Chicago' by default)

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

  6. Optional Add/modify additional search filters to the doSearch() function (maps_lib.js line 69). 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:

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

Resources

Fusion Tables

Community

Reference Guides

More detail needed?

Contact me via email! Derek Eder derek.eder+git@gmail.com

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 and send me a pull request.

Copyright

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

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