Skip to content

Instantly share code, notes, and snippets.

View DylanCodeCabin's full-sized avatar

Dylan Auty DylanCodeCabin

View GitHub Profile
/* Restrict autocomplete to more than one country
*
* In this case: Republic of Ireland and United Kingdom
*/
jQuery(($) => {
WPGMZA.AddressInput.prototype.loadGoogleAutocomplete = function(){
/* UK + Repuclic of Ireland */
const countries = ['ie', 'gb'];
if(WPGMZA.settings){
if(WPGMZA.settings.googleMapsApiKey || WPGMZA.settings.wpgmza_google_maps_api_key){
/**
* This script will automatically reload the marker data via the REST API
*
* It only appends new markers, meaning this is somewhat resful
*
* Currently, this does not deal with shapes or any other data (markers only)
*
* Adjust 'refresh.seconds' to change how frequently the polling request is made
*/
jQuery(($) => {
jQuery(($) => {
$(document.body).on('markersplaced.wpgmza', () => {
const titleQuery = WPGMZA.getQueryParamValue('query_title');
if(titleQuery){
const map = WPGMZA.maps[0]; // Find first map on page
const markers = map.markers;
let matchFound = false;
for(let marker of markers){
if(matchFound){ continue; }
if(marker.title.toLowerCase().trim() === titleQuery.toLowerCase().trim()){
jQuery(function($){
/* Clone the original method */
WPGMZA.ProInfoWindow.prototype._populatePanel = WPGMZA.ProInfoWindow.prototype.populatePanel;
WPGMZA.ProInfoWindow.prototype.populatePanel = function(){
/* Call the original method */
this._populatePanel();
/* Grab a self refernce, to be used in our loop */
const self = this;
/* Demo of how you might replace the HTML template for Atlas Novus Panel info widnows
*
* This uses a dynamic hook, from the shortcode class, and can be applied to any module that is contained in a panel
*
* This assumes, you are targeting the "left" panel, but the same can be applied to the right panel if the anchor is set this way
*/
add_filter('wpgmza_map_panel_elements_left', 'wpgmza_infowindow_override', 10, 1);
function wpgmza_infowindow_override($elements){
if(is_array($elements)){
jQuery(($) => {
/* Map ID */
const mapId = 1;
/* An array with objects, each object represents a marker */
const customMarkerData = [
{
title : "Example Title",
address: "Example Address",
map_id: customMapId,
const customMapId = 1;
/* An array with objects, each object represents a polygon */
const customPolygonData = [
{
description : "This is an example",
fillcolor: "#808080",
linecolor: "#666666",
lineopacity: "0.5",
linethickness: "3",
class CustomEventSystem {
constructor(target) {
this.target = target;
}
trigger(event, data){
const relay = new CustomEvent(event, { detail: (data ? data : false) });
this.target.dispatchEvent(relay);
}
/**
* Our default hide until search behaviour still performs an initial "cache" of markers, but the markers are not shown
*
* This really shows weakness at large data set handling (thousands) where the search will fail if the initial cache is not created
*
* This series of overrides will overcome this by only doing the first fetch when the search is performed
*
* It then re-runs the search after the fact, but only if it has not been done already
*
* This can be added in Maps > Settings > Custom Scripts > Custom JavaScript
Column Type Description
id int Marker ID, auto incremented on insert
map_id int Map ID that this marker is bound to
address string The visual address for the marker
description string The description content, can contain HTML
pic string URL to an image, leave empty to ignore
link string URL for the more details link, leave empty to ignore
icon string Icon data, usually a JSON object for marker icons
lat float Visual lat coordinate for the marker, not used for placement