Name: macoupin-directory
Owner: datamade
Description: a service directory for Macoupin County, Illinois
Created: 2015-02-02 20:58:38.0
Updated: 2016-02-04 02:14:02.0
Pushed: 2016-02-04 02:14:02.0
Size: 20084
Language: CSS
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
You want to put your data on a searchable, filterable map. This is a free, open source template to help you do it.
There's a public Google Group for anyone who wants to or has used the Searchable Map Template. Join the growing community of map makers to learn, share and benefit from each other!
Join the Fusion Table Map Template Google Group »
Follow the steps below and you'll be in business with your own map.
AIzaSyA3FQFrNr5W2OEVmuENqhb2MBB2JabdaOY
You can configure your map by passing in a dictionary of options when you create a new MapsLib
instance in index.html
or index_iframe.html
. Here's an example:
myMap = new MapsLib({
sionTableId: "1m4Ez9xyTGfY2CU6O-UgEcPzlS0rnzLU93e4Faa0",
ogleApiKey: "AIzaSyA3FQFrNr5W2OEVmuENqhb2MBB2JabdaOY",
cationColumn: "geometry",
p_center: [41.8781136, -87.66677856445312],
cationScope: "chicago"
| 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. | | map_centroid | | Required. Center [latitude, longitude] that your map defaults to. | | recordName | record | Used for showing the count of results. | | recordNamePlural | records | | | searchRadius | 805 | Default search radius. Defined in meters. Default is 1/2 mile. | | locationColumn | geometry | Name of the location column in your Fusion Table. If your location column name has spaces in it, surround it with single quotes like this “'my location'“. | | locationScope | chicago | Appended to all address searches to keep results within a geographic area. | | defaultZoom | 11 | Default zoom level when map is loaded (bigger is more zoomed in). | | addrMarkerImage | images/blue-pushpin.png | Image used to identify your address search on the map. Setting it to blank will hide the marker. |
Take a look at the wiki to see how to add your own custom filters and views like:
If you want to embed the template in a page on your website, the easiest way to do it is with an iframe. We provide an iframe-optimized template for this purpose:
This template works exactly the same way as the standard full screen template. All the javascript code is still contained in js/maps_lib.js
.
To embed, you can use the following code on your page:
ame
yle="border-style: none;"
c="/path/to/map-template/index_iframe.html"
dth="600"
ight="950" >
rame>
You must explicitly set the size of the iframe, so midify the height
and width
attributes as necessary. You can also control the height of the map in css/custom.css
:
ame #map_canvas { height: 500px; }
If you want to create a map with two layers - one with points and another with polygons, take a look at Jack Dougherty's FusionTable-Map-2-layers, based on this template. It's a great place to start.
Fusion Tables
Community
Reference Guides
If your map isn't displaying any data, try the following:
This is due to a recent change to the FusionTablesLayer and only effects tables created after mid-November 2012. A styleId and templateId must be defined.
When you create custom styles for the first time, the styleId will be 2. For custom info window layouts, the first templateId will also be 2. The latest version of this template has these defaults set, but in case you want to add it to an existing project, use the following code:
apsLib.searchrecords = new google.maps.FusionTablesLayer({
query: {
from: MapsLib.fusionTableId,
select: MapsLib.locationColumn,
where: whereClause
},
styleId: 2,
templateId: 2
);
For reference, styleId 1 is the default look - usually small red dots or red polygons. templateId 1 is the default info window that just shows the first few columns in your table.
For more information, see Working with styles and Working with templates in the Fusion Tables documentation.
By default, Fusion Tables only provides 10 (5 large and 5 small) marker icons.
From my understanding, this is for performance reasons (the map and icon tiles are cached). However, there are two ways to work around it:
The results counter uses the Fusion Tables API, which requires an API key and some specific sharing permissions. Try the following in this order:
1m4Ez9xyTGfY2CU6O-UgEcPzlS0rnzLU93e4Faa0
. To get a new one, go to the Google API ConsoleAsk for help on our Fusion Table Map Template Google Group!
Notice a bug or want to add a feature? Open an issue or submit a pull request like so:
Copyright (c) 2015 Derek Eder. Released under the MIT License.
If you use this template, please provide the following attribution in the footer:
ref='http://derekeder.com/searchable_map_template/'>Searchable Map Template</a>
a href='http://derekeder.com'>Derek Eder</a>.
See LICENSE for more details.