How to create a custom map for your Webflow website

With No Code Map App, there are two ways to create a fully customised, filterable interactive map for your webflow website.

1. Use tabular dataset from spreadsheets, Google Sheets, or Airtable, or

2. Connect it to your Webflow CMS

For this blog, I will focus on method 2 - create map using your Webflow CMS.

How to create a custom interactive map for a Webflow website.

1. Pick a ready-to-use map template

2. Connect it to your Webflow CMS

3. Customise your map

I. Pick map template

We have a library of ready-to-use map templates, custom designed for the major industry use-cases. But if you are unsure, you can always use the General template which will can handle any kind of dataset.

II. Connect your data

You have 4 ways to import your data:

• Copy & paste your spreadsheet data

• Link it to your Google Sheets

• Link it to your Airtable

• Link it to your Webflow CMS

So as a Webflow user, you can either use external database or your Webflow CMS to power your map.

If you want to use your Webflow CMS to power your map, all you need to do is enter your Webflow API token and Collection ID.

After that, our building will automatically pick up your fields and for each map you can choose up to 15 columns of data. Once it has finished importing the data, our builder will automatically convert your data into an interactive map.

You can also configure your own custom domain / slug URL as a part of our Webflow CMS integration. Once configured, it would automatically create a call-to-action in your map that takes users to each individual page you have set up in Webflow.

III. Customise

You can customise pretty much every component of the map:

• Side bar

• Pop up

• Map filters

• Call-to-actions

• Font and colour

• Map markers

• Zoom setting

and more!

How to publish your map to your Webflow website

Once you have created your map, No Code Map App custom maps can be embedded onto any website regardless the platform you used to create the website.

The general principle is via an embed code which we will create for you when you click on the "Publish" button.

Once you have "copied" the embed link. Then go to your webflow account to embed your custom map.

Below are step-by-step guide from Webflow on how to embed a custom code.

To add embed code directly into your Webflow design

1. Copy the embeddable code

2. Press A to open the Add elements panel

3. Add an embed element from the components section

4. Paste in the custom code you copied in step 1

5. Save and close the modal

To add embed code in a rich text element

1. Place your cursor where you want to add custom code

2. Click the "+" sign to open the insert menu and click the custom code button

3. Add your embed code

To edit the code in the Embed element, you can either

• Double-click the element

• Select the element and press enter

• Click Open code editor in the Settings panel under Embed settings

Here is a full tutorial by Webflow showing you how to embed a map. :)

I will be doing individual post on other major website builders too!

Nan