How to Create Custom Map Icon in Squarespace

May 18

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

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!

The recommended image size for this icon is 43px high x 59px wide.

Steps and codes for the tutorial are below; be sure to watch the video so you can see how to install this code step by super important step, and what part of the code you’ll need to change to make it look amazing on your own site.

Here are the steps & code’s you need to know:

1. Upload the image to your site files (Design → Custom CSS → Manage Custom Files → drag & drop the image here)

2. Add this code to your Custom CSS (Design → Custom CSS)

.gm-style img {
background-image:url(url-image-here);
background-size:contain;
background-repeat:no-repeat
} .gm-style a img {background-image:none}

3. In the code above, replace the text url-image-here with the URL generated by Squarespace when you upload the image to your site. If you click on the image in your site files (Design → Custom CSS → Manage Custom Files) and Squarespace will paste the URL into your Custom CSS window.

4. Press save and you will be good to go!

DOWNLOAD TRANSCRIPT →