top of page
Search
  • Writer's pictureNan Zhou

How to create a custom map for your Webflow website

Updated: Mar 1, 2023

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

478 views1 comment

1 Comment


Dave Barnes
Dave Barnes
Jun 11, 2023

How about leaving Twitter and moving to Mastodon.

thanks,

dave


Like
bottom of page