How to add a map widget to your Squarespace vacation rental website
Squarespace works well for stylish vacation rental pages. On Business plans and above, Code Blocks run scripts, so the RentalBeam script embed is the cleanest setup; if your plan strips scripts, use the iframe snippet inside the same Code Block. Either way, guests see your rental's location without leaving your site.
Why add a map to your Squarespace site?
A guest deciding between listings wants to know exactly where they would be staying before they inquire. A styled map that matches your site removes that guesswork, shows nearby highlights you choose to share, and reads as a real, cared-for listing rather than a bare address. See the map widget page for a closer look at the themes and pin styles.
- Show your rental's exact location, or a privacy-friendly approximate area
- Match your site with five curated themes and a brand-colored pin
- Add nearby highlights - attractions, restaurants, transit - guests will actually use
- Works the same way on a single rental map or a collection map with several pins
What you need
- A Squarespace page you can edit
- A rental with its location saved in RentalBeam (Location tab)
- A map style chosen in the dashboard Maps tab (theme, pin, and signature color)
Every plan can build one
Every RentalBeam plan, including Free, can build, style, and live-preview a map in the dashboard Maps tab. Embedding it on your own website needs Plus or Pro - see pricingfor details. On Free, the embed still renders on RentalBeam's own pages, and any other site shows a neutral "Map unavailable" notice instead of an upgrade prompt.Setup steps
- 1
Save your rental's location
- Open the rental in your RentalBeam dashboard and go to its Location tab.
- Search for the address, or drag the pin directly on the map to fine-tune the exact spot.
- Choose exact-pin mode (guests see your real location, plus any nearby highlights) or approximate-area mode (a shaded circle, and your exact coordinates never reach the guest).
Nearby highlights are optional
On exact-pin maps, you can add nearby highlights - attractions, restaurants, transit stops - with icons and short notes, also edited on the Location tab.
Save the location on the Location tab before it can appear on a map. - 2
Style your map and copy the embed for Squarespace
Open the Maps tab in the dashboard and pick a theme (Signature, Terrain, Coastal, Midnight, or Minimal - a fixed choice that never follows a visitor's device theme), a pin style (Teardrop, Dot, or Photo), and a signature color that auto-matches your booking accent or a custom hex.
The Maps tab builder - pick a look, then copy the embed code at the bottom. RentalBeam recommends the script embed for Squarespace. Use the matching code format below as your reference.
html<script src="https://cdn.rentalbeam.com/v1/embed.js" async></script> <div class="rentalbeam-map" data-rental-id="your-rental-id"></div>Squarespace Code Blocks run scripts on Business plans and above, so the script embed keeps the map at its chosen theme and aspect ratio; if your plan strips scripts, use the iframe snippet in the same Code Block. The embed code also accepts optional attributes for aspect ratio, corner radius, and default zoom - see the map widget docs for the full reference.
Squarespace publishing reminders
- Paste into a Code Block, not a Text or Markdown block, so Squarespace does not escape the code.
- Code Blocks execute scripts on Business plans and above; on a lower plan that strips scripts, use the iframe snippet instead.
- Check the live published page (not just the editor preview) on desktop and mobile, since Code Block scripts may not run inside the editor.
- 3
Paste the map into Squarespace
Builder-specific install steps
Use these steps to place the RentalBeam map exactly where guests look for your location.
Recommended: ScriptSquarespace
Use a Code Block with the script embed; switch to the iframe snippet only if your plan strips scripts.
Squarespace Code Blocks run scripts on Business plans and above, so the script embed keeps the map at its chosen theme and aspect ratio; if your plan strips scripts, use the iframe snippet in the same Code Block.
Use the Script tab for this builder.
- Open the page section you want to edit
- Insert a Code Block
- Paste the RentalBeam map script embed code
- Save, publish, and confirm the map on the live page
Before you publish
- Paste into a Code Block, not a Text or Markdown block, so Squarespace does not escape the code.
- Code Blocks execute scripts on Business plans and above; on a lower plan that strips scripts, use the iframe snippet instead.
- Check the live published page (not just the editor preview) on desktop and mobile, since Code Block scripts may not run inside the editor.
- 4
Publish and verify the map
Where to place the map on the page
- Add the map near your address, directions, or nearby-attractions content instead of burying it deep in a long page.
- Test the page inside Squarespace preview and on a live published URL.
- Leave enough vertical space so the embed does not feel cramped inside the section.
Treat the map as supporting proof, not the hero
High-converting listing pages put the map near the address, directions, or a short neighborhood description - close enough that guests notice it without it competing with your main booking call to action.Already have the calendar widget on Squarespace?
If you already added the RentalBeam availability calendar to your Squarespace site, the map embeds the same way - the same script tag, the same paste-and-publish workflow, just a different container. Read the Squarespace calendar guide if you have not set that up yet.