A Beginner’s Guide to Squarespace Map Blocks
Show a physical location for a business or event on your website using a Squarespace map block.
Map blocks display a visual map for a specific address using the Google map data.
When you place a location pin, website visitors can click the pin to open the map in Google Maps for easy navigation. The map will resize to fit any screen, so it looks great on phones, tablets, and computers.
Important info to know:
You can only list one location per map block.
Squarespace can't display business information on the map itself, but you can provide a link to a third-party tool like your Google Business Profile.
How to add a map block to Squarespace
Select edit on the top left-hand side of your website preview.
Click the add block option on a page section, or the plus sign inside classic editor.*
Select the map option form the list of content blocks.
Double click on the map block, or click once and select the pencil icon to open the edit menu.
In the content tab, update the business name and address for the pin location you want to display on the map.
Using the design tab, you can change the map color to a different premade color setting (Original, Grayscale, Satellite, Dark, Light, Blue). This is also where you can choose to display or hide the map labels, terrain, and zoom controls.
*Classic editor is used by blog posts, additional product details, individual events, and sites built on version 7.0 Learn more inside Squarespace Made Simple*
What you can customize about the map block using Squarespace
The only design features we have for the map block at this time are found on the design tab, you can change the map color to a different premade color setting (Original, Grayscale, Satellite, Dark, Light, Blue). This is also where you can choose to display or hide the map labels, terrain, and zoom controls.
How to customize the Squarespace map block with CSS
CSS stands for Cascading Style Sheet and it’s a special type of code that you can use to customize Squarespace. This tutorial will teach you how to customize your map block location icon style with simple code.
Where you can learn more about Squarespace content blocks
Squarespace Made Simple
This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about content blocks.
Squarespace Support Article
Learn more from the official Squarespace support blog
Squarespace
made simple
Get all the info you need to confidently
launch your Squarespace website ASAP.
In this tutorial I am going to show you how to use custom CSS to cover the location icon in a Google map block with your own image!