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

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.

In this guide, we'll look at embedding a map of the United States. To edit basic map options, you can use the US map editor available online.

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 in the admin panel

Then click on the desired page:

Select a page to add a map

Press the “Edit” button to edit the 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

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

Selecting the block type

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

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

As a result, a window will appear:

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

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

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

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

Now we see the path to the file:

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

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

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 new block

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

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 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 with a map

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

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

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

Selecting a page to add a map

Now click on the gear icon.

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

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 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

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

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

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

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.

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

Saving a page with a map.

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

View the added map.