https://github.com/johncoleman83/chicago-resource-hub
Google Maps API Client: material design, fuzzy search, pagination, location popups
https://github.com/johncoleman83/chicago-resource-hub
fuzzy-search google-maps google-maps-api maps material-design pagination search wordpress
Last synced: 2 months ago
JSON representation
Google Maps API Client: material design, fuzzy search, pagination, location popups
- Host: GitHub
- URL: https://github.com/johncoleman83/chicago-resource-hub
- Owner: johncoleman83
- License: mit
- Created: 2017-06-11T06:50:03.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2020-03-06T04:02:53.000Z (over 6 years ago)
- Last Synced: 2025-02-05T10:49:39.683Z (over 1 year ago)
- Topics: fuzzy-search, google-maps, google-maps-api, maps, material-design, pagination, search, wordpress
- Language: JavaScript
- Homepage: https://www.chicagoresourcehub.com/
- Size: 7.64 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Chicago Resource Hub Child Theme and Map Template
## Front-end
https://www.chicagoresourcehub.com/
## Dependencies
### JQuery
This is a vanilla JS application, using JQuery: https://api.jquery.com/
### requireJS
Packages are managed with `require.js`: https://requirejs.org/
### WordPress
This child theme can be plugged into **WordPress**: https://wordpress.org/ However,
all that is needed are some of the JS, CSS & HTML files. The PHP is just some
of the design stuff.
### Material Design
* The ui uses materialize theme based on material design: https://materializecss.com/
* Also google's material.io design for web: https://github.com/material-components/material-components-web/
### FlexSearch
The Data Store of locations is queried using FlexSearch: https://github.com/nextapps-de/flexsearch
### Google Maps API (with Places configured)
* You need to have a Google Cloud Platform Account along with a Project that has a Google Maps API Key
If you don't already have an account, then you will need to start a Google Cloud Platform Account:
* https://cloud.google.com/maps-platform/places/
**$200 free monthly usage**
> For most of our users, the $200 monthly credit is enough to support their needs.
> You can also set daily quotas to protect against unexpected increases.
Instructions on actually aquiring your API key are here:
* https://developers.google.com/places/web-service/get-api-key
## About
### V1
(Now Deprecated) This tool interacted with **Google Fusion** Tables Database using the Google Rest API: https://developers.google.com/fusiontables/
### V2
Current Version of Map Search Tool and Google Maps API.
This uses an in-memory data store, FlexSearch Search API, & Google Maps API
## Usage
* The DataStore location URL should use Local data if you are running locally to develop.
This is important to avoid cross-origin browser errors.
from `js/lib/constants.js`:
```
const DATA_URL = LOCAL_DATA;
```
* If you need the map to function ensure you've inserted a correct Google Maps API Key.
You also need to set the authorizations for your Google API Key in the Google Cloud Command
Console. There you will find a setting to restrict the use of the API key. In order to
test locally, you'll need to set restrictions to **None**.
* Visit: `https://console.cloud.google.com/apis/credentials?authuser=1&project=`
* Click on **"Credentials"** in the Google Cloud Platform Project Settings
* Click on **"Application restrictions"**
* Set your restrictions according to your needs
* The application should have your API KEY configured.
This app uses `require.js`, so in `js/app.js` change the API Key
```
paths: {
shared: 'shared',
jquery: 'jquery-3.4.1',
google: '//maps.googleapis.com/maps/api/js?key=®ion=US&libraries=places'
},
```
* Start server and begin!
```
$ cd v2 && ../scripts/server-cors.py
```
* encode locations js file
This is a little bit of security by obscurity. It does nothing to protect the data
but simply creates a little bit more challenge for bots trying to scrape
contact information. We don't want bots getting all the list of phone numbers
to start spamming these locations.
```
// start server
$ cd v2 && ../scripts/server-cors.py
// convert json data to javascript object
let r = $.getJSON("http://localhost:8000/data/locations.json", function(json) {
return json;
});
// convert data right back to string
// r.responseText;
let stringData = JSON.stringify(r.responseJSON);
// convert string to base65 encoding
let encodedData = btoa(unescape(encodeURIComponent(stringData)))
// convert back
let decodedData = JSON.parse(decodeURIComponent(escape(atob(encodedData))))
```
## Author
David John Coleman II, [davidjohncoleman.com](https://www.davidjohncoleman.com/)
## License
MIT License