top of page
Search

How to make an interactive Event Calendar map

  • Writer: Nan Zhou
    Nan Zhou
  • Feb 14, 2022
  • 2 min read

Updated: Apr 5

Before I go into detail on how to create an interactive Event Calendar map for your website, let's do a quick refresher on our map builder!


This is the No Code Map App 3 step builder - super intuitive and easy to pick up.


Why is it important to have a map view for Events? With majority of events going back to physical events (as opposed to virtual events), it is more important than ever, to show your customers / site visitors a consolidated map view of all the available events so they are informed on "what is happening around them".


So let's see how easily and quickly you can build a custom one using No Code Map App, including custom filters to help your customers find the right event near them!


Build an on-brand, interactive Event Locator for your website


Step 1 - Select the "Event calendar" template


Step 2 - Import your data.


1. Select your data source


There are a number of ways you can import your data:

  • Copy/paste from spreadsheet

  • Sync with Google Sheets

  • Sync with Airtable

  • Sync with Webflow CMS


Click on "Copy/paste from spreadsheet" and you will see a window pop up where you can paste in your data. In order to help you prepare your Excel data, we have included an "example.csv" so you will know exactly how to set up your dataset.



Or you can sync with your Google Sheets, Webflow CMS or Airtable.



In the your data, you can include standard information as well custom fields like:

  1. Event name

  2. Venue

  3. Address

  4. Date

  5. Time

  6. Description

  7. Phone

  8. Website

  9. Theme

  10. Features

  11. Image link

  12. Call-to-action link



2. Select data fields

  1. You can import up to 50 columns of custom data (whatever you want - just make sure you have column headers).

  2. It can self-detect information-based columns (e.g. address, phone etc) vs filterable data (e.g. Theme, Date etc)

  3. You can also include call-to-action and image link columns and auto-generate call-to-action buttons and bulk import images


Once you have imported your data, the No Code Map App smart builder will:

  1. Automatically map your data based on your "location" or "address" column;

  2. Automatically create custom map filters based on your dataset (yes, you read it right, any text filter be it single or multi-value filters. Later on we will also allow number filters);

  3. Locations details will be added under each location.



Step 3 Customize your interactive map!


Now you can bring in your own style/branding! You can customize everything from fonts, colors, to what shows in each location detail box.



You can customise with clicks or text prompts - watch this demo.




And you are done! We are super excited with our live launch!


Nan

 
 
 

Comments


bottom of page