The Map List Layout

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 create an account with google 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 google maps api docs 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 // 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 = \[&#x9; &#x9;{% include 'modules/siteglide system/get/get items', item layout 'item' %} ]; the item liquid file should be left in the format of a json object, but you may choose to add more variables {&#x9; id "{{this id}}", &#x9;lat {{this properties module field 12 7 | split ',' | first | times 1 | default "invalid" }}, &#x9;lng {{this properties module field 12 7 | split ',' | last | times 1 | default "invalid" }}, &#x9;name {{this properties name | json }}, &#x9;address {{this properties module field 12 6 | json }},&#x9; slug {{this full slug | json }},&#x9; event start "{{this properties module field 12 2 | date "%d/%m/%y %h %m t%z"}}",&#x9; event end "{{this properties module field 12 3 | date "%d/%m/%y %h %m t%z"}}",&#x9; 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 we've added marker clustering 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 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 beyond this you'll have to refer to the google maps api documentation to guide you good luck! 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