WordPress plugin for POI maps using Google Maps API
Install as a WordPress plugin or git submodule. Currently it is suggested that you use the latest release as master may be unstable as the database class is rewritten for version 1.0.0.
Here is a block of SASS that describes the resulting markup. Your styles don't need to be quite so specific.
div.gjmaps-wrapper {
ul.gjmaps-categories {
li.gjmaps-category {
&.active {}
div.gjmaps-label {
span {}
}
}
}
.gjmaps-map-canvas {}
}
Column names (all required): [category, name, address, city, state, zip, country, phone, url]
Use the shortcode [gjmaps] in your content to place the maps.
Shortcode options include:
| Option | Value | Required | Notes |
|---|---|---|---|
| map | string | optional* | defaults to map_id |
| map_id | integer | optional* | required if map/api not present |
| position | string | optional | top or bottom, defaults top |
| latitude | integer | optional | defaults to options setting |
| longitude | integer | optional | defaults to options setting |
| zoom | integer | optional | defaults to options setting |
| fit_bounds | boolean | optional | defaults to options setting |
| api | string | optional* | overrides map/map_id, url must have map id |
*one of the three [map, map_id, api] is required.
[gjmaps map_id="4" position="bottom" zoom="16"]
<?php echo do_shortcode('[gjmaps api="http://example.com?gjmaps_api=4"]'); ?>
By default each maps has its own API (JSON) endpoint available for consumption by other gj-maps installations. The trailing id number is a requirement else the data will be entirely false.
http://example.com/?gjmaps_api=4
| Event | Fires |
|---|---|
| gjmapsCatLoad | When categories finish loading |
| gjmapsCatClick | When a catagory is clicked |
| gjmapsPOIInfo | After InfoWindow is opened |
$(window).on('gjmapsCatLoad', function() {
// do stuff
});
Alternatively if you would like to group categories or use self made markup for the map categories you can add the .gjmaps-parent class with data-cat-ids to trigger the map to change it's display. This click event is added to the document so items appended to the DOM will inherit it. This is more of a hack feature than a final solution.
<div class="gjmaps-parent" data-cat-ids="1,2,3">Click to Show Categories 1,2,3</div>
You can define a constant on a page template prior to get_header() to disable gj-maps from loading any scripts. This is helpful and suggested if you are
running another Google Maps application on the page. Our maps default to the latest stable version of maps, currently 3.17.
define('DISABLE_GJ_MAPS', [any value]);
If you are using W3 Total Cache it will strip the defined CORS header. To workaround this you must disable caching on the API pages. That can be fixed by adding /?gjmaps_api=* to the setting under Performance > Page Cache > Never cache the following pages.
If a map is accidentally deleted from a production website, there are some features that allow map recovery without having to build the entire thing from scratch
- Go to the staging or local version of website, which ever has the most recent data
- Use the GJ Maps API endpoint to get a JSON dump of all map data
http://[domain].com?gjmaps_api=[ID] - Copy and paste JSON into a JSON to CSV converter - something like this
- Save CSV file
- Category icon image URL will be provided - save these locally and use them to recreate categories
- Create New Map
- Create New Categories
- Make sure file permissions are allow upload to WP Media Gallery - GJ Maps will not output specific error message
- If category icons are used in a sidebar the SCSS for the page template will need to be updated - new categories will have new IDs and those are the selectors for the SCSS
- Build and push changes to SCSS
- Extract POI columns from CSV for
category, name, address, city, state, zip, country, phone, url, lat, lnginto a new CSV document, removing thepoi/ - Import POIs into new map
- Adjust any fields as needed
- Update map ID in shortcode on the page where deleted map was located
MIT