How to add a map widget to your Weebly vacation rental website
Weebly can show a clean, guest-facing location map without a full PMS or a custom app build. Weebly's Embed Code element accepts JavaScript, so the standard script embed is the recommended path - paste it into an Embed Code element, then publish and check the live page, since Weebly does not preview embedded scripts in the editor.
Why add a map to your Weebly 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 Weebly 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 Weebly
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 Weebly. 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>Weebly's Embed Code element accepts custom JavaScript, so the standard script embed works and keeps the map responsive with no fixed height. Weebly does not preview embedded scripts in the editor, so you confirm it on the published page. The embed code also accepts optional attributes for aspect ratio, corner radius, and default zoom - see the map widget docs for the full reference.
Weebly publishing reminders
- Use the dedicated Embed Code element from the Build panel, not a Text element, so Weebly does not strip the script tag.
- Weebly does not render embedded scripts in the editor preview - this is expected. Always publish and check the live page before assuming the embed failed.
- If your plan or theme ever strips the script, switch to the iframe snippet, which renders without JavaScript.
- 3
Paste the map into Weebly
Builder-specific install steps
Use these steps to place the RentalBeam map exactly where guests look for your location.
Recommended: ScriptWeebly
Use the Embed Code element with the script snippet - it accepts JavaScript. Embedded scripts show only on the published site, not in the Weebly editor.
Weebly's Embed Code element accepts custom JavaScript, so the standard script embed works and keeps the map responsive with no fixed height. Weebly does not preview embedded scripts in the editor, so you confirm it on the published page.
Use the Script tab for this builder.
- In the Weebly editor, open the page where guests should see your rental's location
- From the Build panel on the left, drag an Embed Code element onto the page
- Click the element, choose Edit Custom HTML, and paste the RentalBeam map embed - both the script tag and the map div
- Publish the site, then open the live page to confirm the map (Weebly does not preview embedded scripts in the editor)
Before you publish
- Use the dedicated Embed Code element from the Build panel, not a Text element, so Weebly does not strip the script tag.
- Weebly does not render embedded scripts in the editor preview - this is expected. Always publish and check the live page before assuming the embed failed.
- If your plan or theme ever strips the script, switch to the iframe snippet, which renders without JavaScript.
- 4
Publish and verify the map
Where to place the map on the page
- Drag the Embed Code element near your address or nearby-attractions copy.
- If the map does not show in the Weebly editor, publish the site and check the live page - that is normal Weebly behavior, not a broken embed.
- Give the embed its own row so Weebly columns do not squeeze the map on mobile.
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 Weebly?
If you already added the RentalBeam availability calendar to your Weebly site, the map embeds the same way - the same script tag, the same paste-and-publish workflow, just a different container. Read the Weebly calendar guide if you have not set that up yet.