Skip to content
This repository has been archived by the owner on May 24, 2021. It is now read-only.

Commit

Permalink
updates to readme for new Google API changes
Browse files Browse the repository at this point in the history
  • Loading branch information
derekeder authored May 31, 2018
1 parent 352487e commit dc105fa
Showing 1 changed file with 10 additions and 9 deletions.
19 changes: 10 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# Fusion Table Searchable Map Template
You want to put your data on a searchable, filterable map. This is a free, open source template to help you do it.

**Note** [Beginning on June 11, 2018, Google will require you to enable billing with a credit card and have a valid API key](https://cloud.google.com/maps-platform/user-guide/) for all Google API projects, including this one.

[![Searchable Map Template screenshot](https://raw.github.com/derekeder/FusionTable-Map-Template/master/images/searchable-map-template-v1.2.jpg)](http://derekeder.github.io/FusionTable-Map-Template/)

[See the working demo »](http://derekeder.github.io/FusionTable-Map-Template/)
Expand All @@ -20,6 +22,7 @@ You want to put your data on a searchable, filterable map. This is a free, open

## Releases

* [v 1.5](https://github.com/derekeder/FusionTable-Map-Template/releases/tag/v1.5) - HTTPS support, Fusion Tables API v2
* [v 1.4](https://github.com/derekeder/FusionTable-Map-Template/releases/tag/v1.4) - iframe template, MapsLib class
* [v 1.3](https://github.com/derekeder/FusionTable-Map-Template/releases/tag/v1.3) - Bootstrap 3.2, more robust query function, dynamic zoom
* [v 1.2](https://github.com/derekeder/FusionTable-Map-Template/releases/tag/v1.2) - Bootstrap 3, jQuery 1.10.2, jQuery Address 1.6
Expand All @@ -45,19 +48,17 @@ Follow the steps below and you'll be in business with your own map.
1. Create a Fusion Table ([here's a great tutorial](https://support.google.com/fusiontables/answer/2527132?hl=en&topic=2573107&ctx=topic))
1. Make sure at least one column is set to a type of Location and that Fusion Tables has geocoded it
1. Set the Fusion Table to be publicly visible (via the Share button in the upper right) and make sure that 'Allow Downloads' is checked for your Fusion Table (File => About this table => Edit table information)
1. Create your own Google Maps JavaScript API key to replace the default in the Map Options section of the index.html file above. By inserting your own key, Google will allow 25,000 requests per day to your Searchable Map.
1. Go to the [Google Developers Maps JavaScript API](https://console.developers.google.com/projectselector/apis/credentials) page and click the Get a Key button
1. On the Google Developers Console page, select Create a New Project and press Continue
1. On the Credentials page, create a key, which should look something like `AIzaSyBNVkiNzErPTEGpxWp0cvdqDMd2BxD-S50`.
1. Copy and paste your key into the Map Options section of the index.html file as described above.
1. To find or edit your key in the future, go back to the Google Developers Console page
1. Create your own Google API key to replace the default in the Map Options section of the index.html file above. By inserting your own key, you will be able to use your map on domains other than `*.github.io`.
1. [Follow these instructions to get a Google API key](https://developers.google.com/maps/documentation/directions/get-api-key).
1. You will need to make sure that the **Places API**, **Maps JavaScript API**, **Geocoding API** and **Fusion Tables API** are all enabled for your project.
1. **Note** [Beginning on June 11, 2018, you’ll need to enable billing with a credit card and have a valid API key](https://cloud.google.com/maps-platform/user-guide/) for all Google API projects, including this one.
1. Download or clone this project and fire up your text editor of choice. Open up `index.html` and set your map options at the bottom of the file ([see the full list of options](#mapslib-options))
1. **fusionTableId** - the ID of your Fusion Table (found in Fusion Tables under File => About this table)
1. **googleApiKey** - the API key from your [Google API Console](https://code.google.com/apis/console/)
1. **googleApiKey** - your Google Cloud Platform API key
1. **locationColumn** - the name of your location column in your Fusion Table
1. **map_center** - the lat/long you want your map to center on ([find yours here](http://www.itouchmap.com/latlong.html))
1. **locationScope** - the area you want to limit searches to (set to 'chicago' by default)
1. **New** Get a Google Maps API key. [Follow these instructions](https://developers.google.com/maps/documentation/javascript/get-api-key) and replace the key on this line of `index.html`: `<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places&key=[YOUR KEY HERE]"></script>`
1. Replace the API key on this line of `index.html` with yours: `<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places&key=[YOUR KEY HERE]"></script>`
1. Add/modify additional filters to maps_lib.js. This will depend on the data you are trying to map. Take a look at the [wiki](https://github.com/derekeder/FusionTable-Map-Template/wiki) for [filter examples](https://github.com/derekeder/FusionTable-Map-Template/wiki/Filter-examples) and [list views](https://github.com/derekeder/FusionTable-Map-Template/wiki/List-search-results) to get started.
1. Upload this map and all the supporting files (css, fonts, images and js folders) to your site

Expand All @@ -78,7 +79,7 @@ var myMap = new MapsLib({
| Option | Default value | Notes |
|------------------|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|
| fusionTableId | | **Required**. Table ID of your Fusion Table (found under File => About). |
| googleApiKey | | **Required**. Found at https://console.developers.google.com/ The key provided in this template is for demonstration purposes only. Please register your own. |
| googleApiKey | | **Required**. Found at https://developers.google.com/maps/documentation/directions/get-api-key The key provided in this template is for demonstration purposes only. You will need to register your own for your map to work on domains other than `*.github.io`. |
| map_centroid | | **Required**. Center [latitude, longitude] that your map defaults to. |
| recordName | record | Used for showing the count of results. |
| recordNamePlural | records | |
Expand Down

0 comments on commit dc105fa

Please sign in to comment.