The Map Layout is a List Layout which demonstrates how you can use the Google Maps API to visualise Events from the Siteglide database.
To output the map, output the List Layout as normal, and choose a Map Layout in the layout parameter.
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:
You can use filtering Parameters as normal to filter Events and only show some on the Map.
You can also use URL parameters to carry out advanced filtering.
The item.liquid file should be left in the format of a JSON object, but you may choose to add more variables:
Here, we also use Liquid Logic to check for Events with no location data set and exclude them from the List.
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:
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.
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!
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:
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.
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:
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.