A Simple Guide To Display an Interactive Map on a Website Built on Squarespace

Add beautiful & interactive HTML maps on your Squarespace website using the highly functional Fla-shop.com’s HTML5 maps.

US Map for websites

Table of Contents

Brief instructions

To add a map to a site powered by Squarespace, you need to perform two main steps:

  1. Upload files with a map to the site
  2. Embed code for a map on the desired page
  1. Do it by using the "Link" button. By selecting the text and clicking on this button, you can add JS and CSS files and save them on the server.
  2. You can do it in at least two ways - either by inserting the map connection code using “Code” or by adding the connection of the map files via injection into the page headers, and then using “Code” just creating the required div - the map container.

Uploading files

Navigate to the page where we want to add a map. To do so, on the main page of the site inside the Squarespace account, click on the “Pages” link:

The 'Pages' menu item
The 'Pages' menu item in the admin panel

Then click on the desired page:

Selecting a page
Select a page to add a map

Press the “Edit” button to edit the page

Button to edit page
Button to edit page

Now, we need to enable editing of the text block. You need to move the mouse over it and click on it with the left button to accomplish this. If there are no sections and blocks on the page yet, it is possible to create them. To create a block, click on the plus sign.

Creating a new block
Creating a new block

Then, you need to select the block type - “Text”:

Selecting the block type
Selecting the block type

After the block is available, you need to click on the area inside of it for editing:

Editing a block
Editing a block

After that, the editor panel appears. Now, we need to click the “Link” button (1) and then the gear in the window that appears (2):

Button to create a link
Button to create a link

As a result, a window will appear:

File upload window
File upload window

In this window, go to file management by clicking on the “File” menu item (1). After that, a list of already downloaded files (2) and a button for downloading new files (3) will appear on the right. In Your case, if no files have been uploaded to the site yet, the list of files will be empty. Now, our task is to upload the files with the map to the server. To do so, unpack the archive with the map into a folder. In our case, the folder name is “flamap.” The map files should appear inside the folder:

Unpacked map files
Unpacked map files

Now, when the map files are ready to upload, go back to the browser with an open window for uploading files and press the “upload file” button:

File upload button
File upload button

A window to select files will appear. Select the map file and click the "Open" button. After that, the file will be loaded and displayed in the list of files in the window.

List of files uploaded to the server
List of files uploaded to the server

This way, you need to load map.js, map.css, settings.js, raphael.min.js, paths.js files. If you need to use several files with map settings, you need to upload them.

After uploading the files, you can check their address on the server. To find out the file address, you need to select the file by clicking on it. After that, a checkmark (1) will appear next to the file. Then you need to click the “Save” button (2):

Getting the path of the uploaded file raphael.min.js
Getting the path of the uploaded file raphael.min.js

Now we see the path to the file:

Viewing the file path
Viewing the file path

In particular, you can see that CMS deletes the dots in the file name after loading this, leaving only the dot between the file name and the extension. As a result, the file “raphael.min.js” turned into “raphaelmin.js” on the server.

We now have the map files uploaded to the server. The remaining step is to connect the map to the desired page.

Inserting the Map Using the “Code” Tool

If you followed the previous step, you now have a page selected in your Squarespace admin panel where you want to insert a map. Otherwise, you need to edit it again.

We need to add a new “Code” block. To do this, move the mouse over the plus sign under or over the existing block. This plus sign is not immediately visible; to display it, you need to move the mouse over the block and then move it to its lower or upper border. If there is nothing on the page yet, then you must first create a section by clicking on the “Add section” button:

Add section button
Add section button

The menu for adding a section will appear. Here you need to select the type of section “Text” (1) and the preferred location of the text (2):

Selecting a section type
Selecting a section type

Then you need to create a block by hovering the mouse over the border of one of the blocks where you want the map to appear. A strip with a plus sign will appear, on which you need to click:

Creating a block
Creating a new block

A window for selecting the block type will appear. In it, select “Code”:

Selecting a block type
Selecting the type of block to be created

In the window that opens, select the mode (mode) “HTML” (1 in the screenshot). The “Display source code” switch must be off (2 in the screenshot). In the code entry field (3), enter this map connection code:

<!-- start Fla-shop.com HTML5 Map -->
<div id='map-container'></div>
<link href="/s/map.css" rel="stylesheet">
<script src="/s/raphaelmin.js"></script>
<script src="/s/settings.js"></script>
<script src="/s/paths.js"></script>
<script src="/s/map.js"></script>
<script>
  var map = new FlaMap(map_cfg);
  map.drawOnDomReady('map-container');
</script>
<!-- end HTML5 Map →

Here you should pay attention to the fact that the first dot in the file name “raphael.min.js” is removed because the Squarespace system removed it when loading this file, which we demonstrated in the previous step.

How to look at file paths was also shown in section 2 of this article. If suddenly, for some reason, they differ from those indicated in the above code, then in this code, we must change them to those that the CMS showed you.

Inserting code into a block
Inserting the map initialization code into the created block

After that, you can turn off the add code window by clicking on the area outside it. Now you need to save the article by hovering your mouse over the “Done” button in the upper left menu and then clicking on “Save.”

Saving a page
Saving a page with a map

After saving the page, we see that a map has appeared on it:

Added map
Added map

Adding a map to the site using code injection and the “Code” tool

In Squarespace, there is such a thing as “code injection.” It is a tool that allows you to add HTML code to specific parts of the page. In this section of the guide, we will consider connecting files with a map using code injection into the headers of the landing page (inside the head tag).

Adding a map using injection can be done in several stages:

  1. Connect the map files in the page headers
  2. Create a js-file of the map initialization, load it, and connect it to the headers
  3. Using the “Code” tool, insert to the desired place on the page where the map should appear, and the container will render the map.

Let's consider each of these stages in more detail.

Including map files in the page headers

To do this, go to the list of pages by clicking on the “Pages” menu item on the main page of the site management.

Go to the page list
Go to the page list

Next, click on the page on which we want to place the map.

Selecting a page to add a map
Selecting a page to add a map

Now click on the gear icon.

Page settings button
Page settings button

After that, go to the “Advanced” section (1) and then - “Page Header Code Injection” (2)

Switching to code injection in page headers
Switching to code injection in page headers

Here we enter the following code:

<link href="/s/map.css" rel="stylesheet" />
<script src="/s/raphaelmin.js"></script>
<script src="/s/settings.js"></script>
<script src="/s/paths.js"></script>
<script src="/s/map.js"></script>
<script src="/s/start_map.js"></script>

How to check paths to the files as described earlier. If they differ from the ones given above, we must change them in this code.

We see another file added here - start_map.js, which has not yet been uploaded to the server. This file is needed to initialize the map, and we have yet to create it.

After pasting the code, click “Save”:

Saving code in page headers
Saving the code for including map files in page headers

Creating a js-file for initializing the map, loading it, and connecting it in the headers

We have already connected the file by injecting it into the page headers using the code injection

<script src="/s/start_map.js"></script>

Let's create this file on the local computer and enter the following code into it:

let map=new FlaMap(map_cfg);
map.drawOnDomReady('map_container');

We can see this in the figure:

Contents of the map initialization code file
Contents of the map initialization code file

Save the file. Then we must upload this file to the server. We can do this in the same way as with other files (The process is described in section 2 of this article).

After the file is loaded, you can start inserting the container on the page where you want to see the map.

Inserting a container for a map into the page code

We proceed to edit the page by clicking on “Edit.”

Edit page button
Edit page button

Hover the mouse over the frame above or below one of the blocks, depending on where we place the map. Creating a section and a block if the page is still empty is described at the beginning of section 3 of this guide.

Creating a block
Creating a block

Click on the plus. Next, select “Code.”

Selecting the block type
Selecting the block type — “Code”.

Select the “HTML” mode (1), disable the “Display Source Code” switch (2), if it is enabled, and enter the following code for the map container (3) into the text field:

<div id="map_container"></div>
Saving code in HTML mode.
Saving code in HTML mode.

After completing this, save the page by hovering over “Done” and clicking on “Save” from the drop-down menu.

Saving a page
Saving a page with a map.

And now we see that the map has appeared on the page:

View the added map.
View the added map.

Conclusions

This article describes how to add an interactive HTML map to a site managed by CMS Squarespace. In particular, how to load JS and CSS files and connect them to the target page and initialize the map.

More tutorials

Documentation

API reference