LogoLogo
Siteglide.comAdminRoadmap
  • 👋Welcome
  • Get Started
    • 🚀Quickstart Guides
    • ❔Support & FAQs
      • ℹ️Siteglide Support Policy
      • ℹ️Siteglide Technology Stack
      • ℹ️External Resources
      • ℹ️Front-end Browser Support
  • Portal
    • Account
    • Sites
      • 🚀Quickstart: Create a Site
      • ℹ️Site Details
      • ℹ️Site Users
      • 📋Install & Manage Modules
      • 💳Go Live
      • 💳Subscription
      • 🌍Domains
        • 📋Add a Fully Delegated Domain
        • 📋Add an External Domain
        • 💻Subdomain on a separate instance
        • 📋How to setup a multi domain start page
      • ☁️Site Backups and Disaster Recovery
    • Users
      • 📋User Roles
      • 📋Invite & Manage Users
    • Billing
      • 💳Billing Setup
      • 💳Subscriptions and Changes
      • 💳Automatic Site Upgrades
      • 💳Invoices
    • Tickets
    • Marketplace
    • Agencies
      • 👩‍💻Agency Account
      • 👩‍💻Clients
      • 👩‍💻Site Copies
      • 👩‍💻Agency Whitelabelling
  • Developer Tools
    • CLI
      • 🚀Quickstart: CLI
      • ℹ️About
      • 📋Site Setup
      • ❔Troubleshooting
      • 💻Reference
      • 🛳️CLI Changelog
      • 🧙‍♂️Go Further: CLI
        • Creating WebApps via CLI
    • Liquid
      • ℹ️About
      • 💻Reference
      • Accessing Data in Liquid Variables - Tutorial 1 - Using Dot Notation
      • Accessing Data in Liquid Variables - Tutorial 2 - Iterating over Arrays and Objects
      • Using Collections with WebApps and Modules
      • Accessing Data from the Global Context Variable
      • Truthiness - Using Liquid to determine if a field is empty or blank
      • 📋Alternatives to Storing and Executing Liquid from Database Items
    • GraphQL
      • ℹ️About GraphQL
      • 📋Tutorials
        • Tutorial 1 - Your First Query
        • Tutorial 2 - Pagination
        • Tutorial 3 - Filtering the Results
        • Tutorial 3 - (Answers)
        • Tutorial 4 - Advanced Filtering
        • Tutorial 4 - (Answers)
        • Tutorial 5 - Using Liquid to run GraphQL queries on your Site
        • Tutorial 6 - Variables
        • Tutorial 6 - (Answers)
        • Tutorial 7 - Sorting
        • Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
        • Tutorial 9 - Using Mutations to Create New Records
        • Tutorial 10 - Using Mutations to Edit a Record
        • Tutorial 11 - Using Mutations to Delete an Item
        • Tutorial 12 - Related Records and Datasources
    • Configuration
      • ℹ️Field Types
      • ℹ️Custom Field IDs
    • Zapier Integration
      • ℹ️Formatting arrays correctly
    • Developer Marketplace
      • ℹ️About Building Modules
      • ℹ️Module Setup
      • ℹ️Site Template Modules - and How to Make Your Own
      • ℹ️Create Folder Structure
      • ℹ️Updating Modules
      • ℹ️Submit Module for Approval
      • ℹ️Adding Payment to a Module
      • ℹ️Theme Module Example
      • ℹ️Data & UI Module Example
      • 💻Reference
      • 🌳File Structure
    • Release Notes
      • 🛳️Siteglide Admin/API - Changelog
      • 🛳️Module - System Files - Changelog
      • 🛳️Module - eCommerce - Changelog
      • 🛳️Module - Menu - Changelog
      • 🛳️Module - Slider - Changelog
      • 🛳️Module - Secure Zones - Changelog
      • 🛳️Module - FAQ - Changelog
      • 🛳️Module - Events - Changelog
      • 🛳️Module - Blog - Changelog
  • SiteBuilder
    • Build Sites Faster
      • 🚀Quickstart: SiteBuilder
      • About
      • Site Setup
        • 🏗️Marketplace Themes & Templates
        • 🏗️Create Site From Template
        • 🏗️Install SiteBuilder Module
        • 🏗️Create a Page Template
        • 🏗️Set Up Tailwind CSS with the recommended CLI method
      • Styling
        • 🏗️Editing Tailwind CSS using the recommended CLI method
        • 🏗️Tailwind CSS Themes - Choosing a Build Method
        • 🏗️Tailwind CSS - Preview Mode
        • 🏗️Tailwind's JIT Compiler Via CDN (deprecated)
        • 🏗️Theme Presets
        • 🏗️Example Tailwind Project Setup
      • Layouts
        • 🏗️Insert Static Layouts
        • 🏗️Installing Dynamic Layouts
        • 🏗️Editing Dynamic Layouts
        • About Layouts
          • 🏗️Dynamic Layouts
          • 🏗️Static and Dynamic Form Layouts
          • 🏗️Sliders
      • 💻Reference
    • Advanced Features
      • 🧞SiteBuilder Live Updates API
        • 👀Live Updates Reference
        • 🔹Live Updates Markup Example
        • 📋Steps to Setting Up Live Updates API in a Module/WebApp Layout
        • 🔹Live Updates Example - Enforcing Filters
        • 📋Steps to Use Live Updates Methods
        • 📋Steps to Initialise Live Updates with JS
        • 🗓️Live Updates Changelog
      • ℹ️SiteBuilder JavaScript
        • ℹ️Forms JS
        • ℹ️Social Sharing JS
        • ℹ️Sliders JS
        • ℹ️Dark Mode JS
        • ℹ️Cookie Settings JS
      • ℹ️SiteBuilder Liquid Includes
        • ℹ️Pagination
      • ℹ️SiteBuilder Liquid Functions
        • ℹ️Detail Page Valid
        • ℹ️Field Mapping
        • ℹ️Get Table Config
        • ℹ️Case From Order ID
      • 🗓️SiteBuilder Changelog
    • Extend SiteBuilder
      • ℹ️Create SiteBuilder Themes
      • ℹ️Create Marketplace Modules
      • ℹ️Adding Dynamic Layouts to Themes & Modules
      • ℹ️Adding Static Layouts to your Theme
      • 💻Reference
  • CMS
    • Dashboard
    • Pages
      • 🚀Quickstart: Pages
      • 🎨Studio Alpha Release
      • ℹ️Studio
      • ℹ️Code View & Toolbox
      • ℹ️About Pages
        • ℹ️Page Settings
        • ℹ️Custom Fields in Pages
        • ℹ️Pages with Siteglide CLI
      • ℹ️About Page Templates
        • ℹ️Page Templates with Siteglide CLI
        • Preventing Duplicate Content
      • ℹ️System Pages
      • 💻Reference
      • 🌳File Structure
    • Content Sections
    • File Manager
      • 🔹About Assets
      • 🔹Linking to Assets Explained
      • 🔧Assets Troubleshooting
      • 🔹Siteglide Scripts Explained
      • 💻Assets with CLI
      • 🔼Migrating Assets
      • 📋Steps to Optimise Images on the Fly with Cloudinary
      • 🔹siteglide_head_scripts and siteglide_footer_scripts Explained
      • 🌳Assets File Structure
      • 👀Tags for Assets
    • Forms
      • Quickstart: Forms
      • ℹ️About Forms
      • 📋Guides: Forms
        • 📋Steps to Using Separate Fields for First Name and Surname in a Form
        • 📋Steps to Programmatically Redirecting after a Form Submission
        • 📋Steps to Adding Form Confirmation Pages
        • 📋Steps to Adding a Progress Bar
        • 📋Steps to Changing Form Styling on Submission Using CSS
        • 📋Steps to Using Custom Field Set fields in a Form's Custom Layout
      • 🧙‍♂️Go Further: Forms
        • ℹ️Migrating Forms
        • ℹ️Explained - Preventing Spam Form Submissions and Captchas
        • ℹ️Explained - Show Clearly When a User is Already Logged in When Submitting a Form
        • ℹ️Forms Error Callback and Validation
        • ℹ️Forms Success Callback
        • ℹ️File Upload Previews
      • 🌳Forms File Structure
      • 💻Reference
      • ❔Troubleshooting
    • Automations
      • 🚀Quickstart: Automations
      • ℹ️About
        • ℹ️Email Templates
        • ℹ️Email Automations and Email Templates with Siteglide CLI
      • 📋Guides
        • ℹ️Integration Automations
        • ℹ️A Transactional Email Example
        • ℹ️An API Call Action Example
        • ℹ️A Custom Liquid Action Example
        • 📋Steps to Testing Emails on a Staging Site
        • 📋Steps to Authenticating Sendgrid Emails on Live Sites
      • 🧙‍♂️Go Further
      • 💻Reference
      • 🌳File Structure
    • Categories
      • 🚀Quickstart: Categories
      • ℹ️About
        • ℹ️Outputting Categories on WebApp / Module / eCommerce Layouts
        • ℹ️Filtering WebApps and Modules by Categories Using Liquid Parameters
      • 🌳File Structure
      • 💻Reference
    • Company Information
      • ℹ️About
      • 💻Reference
      • ❔Troubleshooting
    • URL Redirects
  • Modules
    • Core Modules
      • MenuBuilder
        • 🚀Quickstart: Menu Builder
        • ℹ️About
      • Secure Zones
        • 🚀Quickstart: Secure Zones
        • ℹ️About
          • 📋Dynamically Assign a Secure Zone during Form Submission
        • 🧙‍♂️Go Further
          • ℹ️Secure Zones with Siteglide CLI
          • ℹ️Using the context.current_user object
      • Media Downloads
        • 🚀Quickstart: Media Downloads
        • ℹ️Layouts
        • 💻Reference
      • Blog & Authors
        • 🚀Quickstart: Blog & Authors
        • 🔹Blog Archive & Date Filtering
        • 🔹Blog Search
        • 🔹Blog Filter by Category
        • 🔹Blog Filter by Author
        • 🌳File Structure
        • 💻Reference
      • Events
        • 🚀Quickstart: Events
        • ℹ️Standard List View
        • ℹ️Getting Started with Event Filtering & Searching
        • ℹ️Filter by Category
        • ℹ️Filter By Host (Author)
        • ℹ️Filter by Event Dates
        • ℹ️Datasourcing the Event Host
        • ℹ️Search
        • ℹ️Map List View
        • ℹ️Calendar List View
      • FAQ
        • 🚀Quickstart: FAQ
        • 💻Reference
      • Testimonials
        • 🚀Quickstart: Testimonials
        • 💻Reference
      • Slider
        • 🚀Quickstart: Slider
        • 💻Reference: Slider
    • Community Modules
      • 🏗️SiteBuilder
      • 🚀CRM Sync
        • ℹ️About CRM Sync Module
        • 📋Steps to Set Up CRM Sync on an Automation
        • 🗓️CRM Sync Changelog
    • Go Further: Modules
      • ℹ️Front-end Submit Modules
  • WebApps
    • 🚀Quickstart: WebApps
    • WebApp Items
      • 📋Create WebApp Items
      • 📋Importing and Exporting
    • Layouts
      • ℹ️WebApp List Layout
      • ℹ️WebApp Detail Layouts
    • Go Further: WebApps
      • 📋Searching by Location
      • 📋Searching - Advanced Filtering
      • 📋Searching - By Keyword
      • 📋Front End Create Forms
      • 📋Front End Update Forms
      • 📋Front End Delete
  • WebApp Troubleshooting
  • eCommerce
    • 🚀Quickstart: eCommerce
    • Get Started
      • 💡About the eCommerce Module
      • Settings
      • 📂Cart, Checkout and Quotes
        • 💡About Cart, Checkout and Quotes
        • 📋Steps to Implement a Guest Checkout Flow
        • 📂Product Views
          • 🔹Product Layouts
          • 🔹Product List Layout
          • 🔹Product Detail Layout
          • 🔹Add to Cart Button
          • 📋Steps to Datasource and Display Related Products
          • 🔹Dynamic Product Layouts based on Categories
          • 📂Attribute Selection
            • 🔹Attribute Layout - Presenting the Choice to the Customer
            • 🔹Attributes - Changing Product Price after Change
          • 📂Discount Selection
            • Discount Codes Layout
            • Minimum Payments
          • 📂Shipping Selection
            • Shipping Options Layout
        • Managing Products
          • Creating and Editing
          • Securing Products
          • Location
          • Custom Fields
          • Edit Module Structure
          • Product Custom Field Sets
          • Inventory
          • Managing Attributes
          • Pricing
          • Product Categories
          • Open Graph Fields
          • SEO Fields
          • Standard Fields
          • Product Import and Export
          • Discounts
        • 📂Cart
          • 🔹Cart Layouts
          • Checking Inventory in Cart
          • Updating Quantity in Cart
          • Updating Displayed Cart Quantity
        • 📋How to Set Up a Shopping Cart and Guest Checkout - Tutorial
        • 📂Checkout Forms
          • 🔹Checkout Form Layouts
          • 🔹Checkout Forms with PayPal
        • 📂Orders
          • Order Confirmation
          • Re-Ordering
          • 🔹Orders Layouts
        • 📋Steps to Add Secure Zones and User Orders View to your Checkout Flow
        • Quotes
        • Selling Digital Products
        • 🔹Volume Pricing
        • 📋Steps - Alternatives to Product Grouping
      • 📂Basic Payment Forms
        • 💡About Basic Payment Forms
        • 📋Steps to Set up a Basic Payment Form (with a Fixed Payment Amount)
        • 📋Authorize.net Basic Payment Forms
        • 📋PayPal Basic Payment Forms
        • 📋Steps to Allow User to Decide Amount they Will Pay
        • 📋Step-by-step Basic Payment Confirmations
        • 👀Basic Payment Forms Reference
        • ℹ️ecommerce/basic_payment
      • 📂Payment Gateways
        • 💻Building a Custom Payment Gateway
          • 📋Steps to Support Basic Payment Forms with your Custom Payment Gateway
          • 📋Steps to Support Checkout with your Custom Payment Gateway
        • 🔹Paypal Custom Parameters
        • 🔹Styling Stripe Card Elements
        • 💡About Payment Gateways
        • 📋Steps to Switching Payment Gateway
        • 🔹Test Cards
      • 📂Currency and Tax
        • 💡About Tax Codes
        • Currency Changer
        • Tax Code Changer
        • Formatting Currency
      • 📂Subscriptions
        • 💡About Subscriptions
        • Managing Subscriptions
          • Creating Subscription Products
          • Changing Price and Billing Interval
          • Creating a Form for Signing Up and Changing Payment Details
          • Subscription Order Status Explained
          • Terms and Conditions (Good Practice)
        • 📋Subscriptions Payment Gateway Setup
        • Subscriptions List Layout
        • Subscriptions Detail Layout
        • User's Active Subscriptions
        • Subscription Action Required
        • Cancelling Subscriptions
      • 🌳Basic Payment Forms Folder Structure
      • 🌳Cart and Checkout Folder Structure
  • CRM
    • 🚀Quickstart: CRM
    • Users
      • User Details
      • User Secure Zones
      • How Users Edit their Email and Password Front End
      • Custom Field Sets & CRM Custom Fields
      • Storing User's Favourite WebApp / Module Items
    • Companies
    • Cases
      • User's Form Submissions (Cases)
  • Site Manager
    • Code Editor
    • Templates (Pages & Email)
    • Headers & Footers
    • Code Snippets (Includes)
      • 🔧Includes Troubleshooting
      • 👀constants_json
      • 👀constants
      • 🌳Includes File Structure
      • 💻Includes with Siteglide CLI
      • 🔧Tags for Includes
    • System Pages
      • Automatic Site Maps
    • System Emails
    • Data Management
    • Admin Menu Editor
    • Integrations
  • Reporting
    • 🚀Quickstart: Reports
  • Miscellaneous
    • System Features
      • Pagination on Liquid Tags
      • Custom Pagination Layouts
      • Timezones in the Siteglide Admin and on the front-end of your Site
      • Module/WebApp Caching
      • Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
      • Translating Dates
      • Site Search
      • About Site Search
      • AI Tools for the Rich Text Editor
      • Cookies on Siteglide Sites
    • Front-End Performance
      • Video Embeds
      • Forms Above the Fold
Powered by GitBook
On this page
  • Prerequisites
  • Introduction
  • Outputting the Map Layout on a Page
  • How does the Map Layout Convert Event Locations to a JavaScript array?
  • Clustering
  • Customising the Map
  • Customising the Options
  • Customising the Event Detail Popups (infowindows)
  • Customising the Map - Advanced- Following Google's Documentation

Was this helpful?

Export as PDF
  1. Modules
  2. Core Modules
  3. Events

Map List View

PreviousSearchNextCalendar List View

Last updated 4 months ago

Was this helpful?

The Map Layout is a List Layout which demonstrates how you can use the Google Maps API to visualise Events from the Siteglide database.

Prerequisites

  • You've Installed the Events Module

  • You've added Events in the Admin

  • You've added a Location to at least one Event

Introduction

The Map Layout is a List Layout which demonstrates how you can use the Google Maps API to visualise Events from the Siteglide database. In order to use this Layout, you'll need to and follow the instructions to generate an API key.

We've tried to expose just enough of the JavaScript to allow you to customise your Layout, while keeping as much Liquid as possible tucked away to keep things simple. Despite this, you will need to refer to the for any advanced customisation work you'd like to carry out.

Outputting the Map Layout on a Page

The Events Module Map Layout is an example of a List Layout. Like all List Layouts, you can output the Events Module Map Layout in any Liquid File, including Pages, Templates and Layouts. However, it also requires JavaScript to function properly, so it will not be supported inside an Email e.g. Autoresponder or Workflow.

To output the map, output the List Layout as normal, and choose a Map Layout in the layout parameter.

{%- include 'module'
    id: '12'
    layout: 'design_system/1/map'
    per_page: '5000'
    show_pagination: 'false' 
-%}


There are a few parameters which work particularly well on the Map Layout, because we will want to disable Pagination and show all enabled and released Events at once:

  • per_page: 5000 - Makes sure the first Page shows all Events that are enabled and released

  • show_pagination: 'false' - Hides Pagination Controls

You can use filtering Parameters as normal to filter Events and only show some on the Map.

  • category_ids - Add a comma-seperated string of Category IDs to display

  • item_ids - Add a comma-seperated string of Item IDs to display

You can also use URL parameters to carry out advanced filtering.

How does the Map Layout Convert Event Locations to a JavaScript array?

You'll notice in the wrapper.liquid file that the ordinary Liquid which fetches the item.liquid files is outputted inside a JavaScript <script> element. This is very important as it allows the Liquid data to be converted to the JavaScript array that Google Maps needs.

<script>
    //---Events Module Map View Options--- 
    //--- The Events Module Items should be loaded into a JavaScript Array- 
    //--- this allows them to be used by Google Maps. Changing the format in the item.liquid 
    //--- file may cause errors.
    var locations = [
        {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}
    ];
</script>

The item.liquid file should be left in the format of a JSON object, but you may choose to add more variables:

{	
    id: "{{this.id}}",
	lat: {{this.properties.module_field_12_7 | split: ',' | first | times: 1 | default: "invalid" }},
	lng: {{this.properties.module_field_12_7 | split: ',' | last | times: 1 | default: "invalid" }},
	name: {{this.properties.name | json }},
	address: {{this.properties.module_field_12_6 | json }},	
    slug: {{this.full_slug | json }},	
    event_start: "{{this.properties.module_field_12_2 | date: "%d/%m/%Y %H:%M T%z"}}",	
    event_end: "{{this.properties.module_field_12_3 | date: "%d/%m/%Y %H:%M T%z"}}",	
    valid: "
{% if this.properties.module_field_12_7 == blank %}invalid{% else %}valid{% endif %}"
}{% unless forloop.last %},{% endunless %}

Here, we also use Liquid Logic to check for Events with no location data set and exclude them from the List.

Clustering

The following behaviour was chosen by us for convenience and demonstration purposes, but can be changed by following the Google documentation.

If any markers are too close to each other, they will be "clustered" under a clustering marker, which will display a number for the number of Events in that location:

Clicking on the clustering marker will zoom in by an increment of 1, unless the User is at maximum zoom. As soon as we have zoomed in enough to display more of the markers without causing confusion, we will do so:

If we reach maximum zoom and some Events are still clustered (perhaps at the same location), the next click on the clustering marker will reveal an "infowindow" containing details on all Events at that location:

Customising the Map

We've split the JavaScript for the Map Layout into two files:

  • wrapper.liquid - Here we define the variables which form the key "settings" needed to to set up the Map the way you want it

  • assets/js/modules/module_12/default_map.js - This contains the rest of the code needed to make the map functional. For advanced developers who wish to edit using the Google Maps API docs, you can edit this file.

Customising the Options

These options are all explained by comments in the wrapper.liquid JavaScript. Make sure to follow each line except the last with a comma:

  • map_selector: "#map" - The Selector for the Element into which you want to render the map.

  • zoom: 3 - Sets the initial zoom on the Map. 1 is minimum and 22 is maximum.

  • center: false - Sets the initial center of the Map. Should be in format {lat: Float, lng: Float} or false. If false, we will find the mid-point between all event locations and center there.

  • show_info_windows: true - Info Windows give the event information as a modal when you click an event marker.

  • markers.animation: - Select an animation option from the Google Maps Documentation. String e.g. "DROP".

  • show_summary: false - Shows a summary of the Events visible on the current Map Viewport.

  • summary_selector: "#mapSummary" - Selector for Element which will contain any summary. String

Customising the Event Detail Popups (infowindows)

To do this, you'll need to carefully edit the default_map.js file. You'll need to understand how to concatenate Strings and Variables in JavaScript to construct a larger String containing HTML code.

We keep the infowindows for markers and clusters separate. This is because they use different variables, and because it allows you to be more flexible.

1 - Define infowindow HTML for markers

Find the comment in the code: //Define infowindow for markers

Next, you'll need to edit the variable here. It's value should be an HTML String containing the content you'd like for the infowindow. You can move the variables around however you like, as long as the syntax remains correct!

content: '<h2>'+locations[i].name+'</h2><a href="'+locations[i].slug+'">View Details</a><br><br><p>'+locations[i].address+'</p><p>Starts: '+locations[i].event_start+'<br>Ends: '+locations[i].event_end+'</p>'

2 - Define infowindow HTML for cluster markers

Find the comment in the code: //--Cluster Markers--- Add a marker clusterer to manage the markers.

Next, you'll need to edit the variable here:

infoWindowContent = infoWindowContent + '<h2>'+c.markers_[i].event_data.name+'</h2><a href="'+c.markers_[i].event_data.slug+'">View Details</a><br><br><p>'+c.markers_[i].event_data.address+'</p><p>Starts: '+c.markers_[i].event_data.event_start+'<br>Ends: '+c.markers_[i].event_data.event_end+'</p><br><br>'

This is slightly more complicated, because the JavaScript will loop over this and display it for each Event inside the cluster at this level of zoom.

3 - Edit the CSS

As normal, you can use custom CSS to edit the styling of any of the infowindows. Use any classes you added in the previous two steps to target them.

Customising the Map - Advanced- Following Google's Documentation

You'll be able to make changes in:

  • The Page

  • item.liquid and wrapper.liquid file

  • default_map.js file

If you'd like to see the core functionality of the Events Module expanded, please make a suggestion on the Roadmap and we'll consider it for a future release.

We've added to the Map- which is useful if you're displaying multiple Events in the same area. Each time the map is moved, or zoomed in or out, an Event Triggers which will re-draw the markers.

Beyond this- you'll have to refer to the to guide you. Good luck!

ℹ️
create an account with Google
Google Maps API docs
Marker Clustering
Google Maps API documentation