Add beautiful & interactive HTML maps on your Squarespace website using the highly functional Fla-shop.com’s HTML5 maps.
To add a map to a site powered by Squarespace, you need to perform two main steps:
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.
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:
Then click on the desired page:
Press the “Edit” button to edit the 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.
Then, you need to select the block type - “Text”:
After the block is available, you need to click on the area inside of it for editing:
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):
As a result, a window will appear:
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:
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:
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.
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):
Now we see the path to the file:
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.
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:
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):
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:
A window for selecting the block type will appear. In it, select “Code”:
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.
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.”
After saving the page, we see that a map has appeared on it:
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:
Let's consider each of these stages in more detail.
To do this, go to the list of pages by clicking on the “Pages” menu item on the main page of the site management.
Next, click on the page on which we want to place the map.
Now click on the gear icon.
After that, go to the “Advanced” section (1) and then - “Page Header Code Injection” (2)
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”:
We have already connected the file by injecting it into the page headers using the code injection
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:
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.
We proceed to edit the page by clicking on “Edit.”
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.
Click on the plus. Next, select “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:
After completing this, save the page by hovering over “Done” and clicking on “Save” from the drop-down menu.
And now we see that the map has appeared on the page:
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.