Custom Markers and Icons for Squarespace Maps
Learning Objectives
- Add custom markers and icons to your Squarespace map blocks
- Use different marker styles to distinguish between location types
- Troubleshoot common map customisation problems
Introduction
Your map doesn't have to look like everyone else's. Adding custom markers and icons makes your locations stand out and keeps everything on-brand with your website.
This chapter shows you how to replace those standard red pins with something that actually represents your business. You'll learn to upload custom icons, place them accurately, and fix the most common issues that trip people up.
Lessons
Adding Your First Custom Marker
The basic process is straightforward once you know where to look.
Step 1: Go to your page editor and click on your map block
Step 2: Click on an existing marker or the 'Add Location' button
Step 3: In the location settings, look for the marker icon option
Step 4: Click 'Upload Image' and select your custom icon file
Step 5: Position the marker by dragging it to the exact spot you need
Your custom icon should be a PNG or JPG file, ideally square-shaped and at least 32×32 pixels. Anything smaller gets blurry when the map zooms in.
This is the bit most people miss: your icon needs good contrast against map backgrounds. What looks perfect on your white website might disappear against a light-coloured map.
Using Multiple Marker Styles
Different locations need different markers. Here's how to set up a system that makes sense.
Step 1: Plan your marker categories first (main office, retail stores, delivery areas, etc.)
Step 2: Create or find icons for each category, keeping them visually related
Step 3: Add your first location and upload its specific marker
Step 4: For each additional location, repeat the process with the appropriate icon
Step 5: Preview your map to check all markers are visible and distinct
Colour-coding works well here. Use the same icon shape but different colours for different location types. Your visitors will understand the system immediately.
Fixing Common Problems
Here's what usually goes wrong and how to sort it out.
Problem: Uploaded marker doesn't appear
Solution: Check your file format (PNG and JPG work best) and size (under 2MB). Clear your browser cache and try again.
Problem: Marker appears but looks pixelated
Solution: Upload a higher resolution image. Aim for at least 64×64 pixels for crisp display.
Problem: Marker is too big or too small
Solution: Squarespace automatically sizes markers, but you can adjust this in the map block settings under 'Marker Size'.
Problem: Multiple markers overlap and become unreadable
Solution: Either zoom in further on your map or use smaller, simpler icons.
Roll your sleeves up and test everything on different devices. What works on desktop might need adjusting for mobile.
Practice
Take your business logo and create a simple marker version. Remove any text and simplify the design so it's readable at small sizes. Upload this as a custom marker for your main business location.
If you don't have a logo, try using a simple coloured circle or square that matches your website's colour scheme.
FAQs
Can I use any image as a custom marker?
Yes, but it needs to be in PNG or JPG format and under 2MB. Square images work best.
How many custom markers can I add to one map?
There's no hard limit, but too many markers make your map cluttered and hard to read. Keep it practical.
Do custom markers work on mobile devices?
Yes, they display on all devices, though you might want to test the size and visibility on smaller screens.
Can I change a marker after I've added it?
Absolutely. Click on the marker in your editor and select a new image or adjust the settings.
What size should my custom marker images be?
At least 32×32 pixels, but 64×64 pixels gives better quality. Keep them square-shaped for best results.
Jargon Buster
Markers: The pins or icons that show specific locations on your map
Custom Icons: Your own images used instead of the standard map markers
Map Block: The Squarespace content block that displays interactive maps on your pages
PNG/JPG: Image file formats that work for custom markers (PNG handles transparency better)
Wrap-up
Custom markers transform a basic map into something that properly represents your brand. Start simple with one or two marker types, then expand your system as you add more locations.
The key is keeping your markers simple, high-contrast, and meaningful to your visitors. Test everything on different devices and don't be afraid to adjust the design based on how it actually looks in practice.
Next up, we'll cover advanced map styling options that take your location displays even further.