Add Google Maps to Your Squarespace Site with Map Blocks

Adding Google Maps to Your Website with Map Blocks

TL;DR:

• Use map blocks to embed Google Maps on your Squarespace site
• Add location pins by typing an address and selecting from autocomplete suggestions
• Customize map colours and styles through the Design tab
• Each map block supports only one location pin
• Maps automatically adjust for mobile devices but may need tweaking for optimal display

Map blocks make it simple to show your location on your website. Here's how to add them and get the most out of them.

Adding a Map Block

To insert a Google Map on your Squarespace site:

1. Open the page editor for the page you want to edit
2. Click an insertion point, then select "Map" from the block menu
3. Click the pencil icon to open the block editor

Setting Up Your Map Block

Adding a Location Pin

In the Map Block's content tab, start typing your address. Google's autocomplete will suggest matching addresses as you type. Select the correct address from the suggestions to place your location pin automatically.

Get the Squarespace Template Builder, with over 300 unique section designs.

The business name won't display on the map block itself, just the pin location.

Customizing Map Appearance

Head to the Design tab to adjust your map's look. You can choose from several styles:

• Original
• Grayscale
• Satellite
• Dark
• Light
• Blue

You can also add layers like Labels, Terrain, or Controls to make your map more detailed.

Adjusting Map Size and Position

On desktop, change the map block's height by dragging the bottom handle. Hold Shift while dragging to snap to 20-pixel increments.

When your map sits next to another block, you can adjust the width for better alignment.

Always check your map in device view to make sure the pin stays visible and the layout works well on phones and tablets.

How Visitors Use Your Map

When visitors click the location pin, it opens Google Maps where they can get directions. Map navigation works differently depending on the device:

• Desktop users can click and drag to move around
• Mobile users need two-finger gestures to navigate

FAQs

Can I add multiple location pins to the same map?
No, each map block only supports one location pin. For multiple locations, add more map blocks or embed a custom Google Map.

What if the map pin isn't visible on mobile?
Map blocks resize automatically, which can sometimes hide the pin. Check the mobile preview and adjust your map's zoom level or positioning if needed.

How do I fix incorrect map information?
Report errors directly to Google using their "Report a Map Error" option. If problems continue, try removing and re-adding the map block.

Jargon Buster

Map Block – Squarespace's built-in feature for adding Google Maps to your pages

Location Pin – The marker that shows your specific address on the map

Block Editor – The interface where you edit block settings and content

Device View – Squarespace's preview mode that shows how your site looks on different screen sizes

Joun Pixelhaze for free and gain access to courses, plugins and discounts.

Wrap-up

Map blocks give you an easy way to show your location without any technical setup. The key is making sure your address is accurate and your map displays properly on all devices. Take a few minutes to check how it looks on phones and tablets, and adjust the styling to match your site's design.

Ready to build your perfect Squarespace site? Join Pixelhaze Academy for step-by-step tutorials and expert guidance.