How to Embed Interactive Maps in Weebly (Square Online & Classic)
Whether you’re using the new Square Online editor or the classic Weebly builder, you can display a customizable map on your page in just a few clicks.
Introduction
Weebly now exists in two versions: the newer Square Online editor (used by most new accounts) and the legacy Weebly Classic drag-and-drop builder. This guide shows both paths so you can paste your Embedded Maps code and publish a live, interactive map in minutes.
Note: In Square Online, the Embed code section is available on paid plans. If you don’t see it, check your site’s current plan.
Example
Below is a live example of an embedded map. After the demo, you’ll find step-by-step instructions for both editors.
This interactive map can be fully customized in your account. You can change region colors, add tooltips with content, insert links, and place markers anywhere on the map. The settings let you choose how content is displayed — as simple hover tooltips, a side panel, or a modal box. Once configured, the map is automatically responsive and works on both desktop and mobile devices.
Step 1 — Copy your map’s embed code
1) Open your Embedded Maps account and select the map you want to publish.
2) Click Embed code and copy the snippet.
3) Keep it handy—you’ll paste it into your Weebly/Square editor in the next step.
Path A — Square Online (new editor)
Use this if your editor shows + Add → Section and modern section blocks.
Step 2 — Add an Embed Code section
1) Go to Square Dashboard → Online → Website → Edit site and open the page where you want the map.
2) Click + Add → Section → Embed code.
Step 3 — Paste your code
1) Select the new Embed code section.
2) Paste your Embedded Maps snippet into the code field.
3) Adjust section width/spacing if needed (full-width looks best).
Step 4 — Publish
Click Publish to make the map live on your site.
Path B — Weebly Classic (legacy editor)
Use this if your editor has a left sidebar with draggable elements like Embed Code.
Step 2 — Add the Embed Code element
1) In the left sidebar, find the Embed Code (</>) element.
2) Drag & drop it onto your page where the map should appear.
Step 3 — Paste your code
1) Click inside the new block and choose Edit Custom HTML.
2) Paste your Embedded Maps snippet.
Step 4 — Publish
Click Publish to make the map live.
Troubleshooting
I don’t see “Embed code” in Square Online.
You’re likely on a Free plan—custom embed code is available on paid plans.
The map shows in the editor but not on the live site.
Make sure you click Publish after pasting the code.
The map looks too narrow.
Use a full-width section/area, or reduce side padding in the section settings.
FAQ
Can I add links, tooltips, and markers?
Yes. Configure everything in the Embedded Maps editor, then use the generated embed code.
Can I reuse the same map on multiple pages?
Yes. Paste the same snippet wherever you want the map to appear.
Will the map adapt to mobile screens?
Yes. The map is responsive and will scale within its container.
Next steps
• Try the map editor to customize colors, tooltips, and markers.
• Create a free account and embed your first map in minutes.
• See pricing if you need multiple maps or advanced options.