Weebly Installation | Documentation

Unlike other site builders, Weebly gives its users the ability to add code directly to their pages without having to use an iFrame. That makes it easy to add a SimpleMaps map to your Weebly site and have it work flawlessly. To learn how, follow the instructions below:

1. First, choose the map you want to install
   HTML5 World Map HTML5 US Map HTML5 Canada Map HTML5 North America Map HTML5 County Map HTML5 State Map HTML5 Custom Map HTML5 Europe Map HTML5 UK Map HTML5 Australia Map HTML5 Country Map

2. Customize your map using our online customization tool. Make sure to set the width in the "Settings" tab to responsive.

   

3. After you have customized your map, you'll have two files: worldmap.js and mapdata.js

4. We need to upload these files to your Weebly Store. This guide will show you how to upload the files to Weebly. Alternatively, you could use our file hosting for easier updating and resume this guide in Step 8.

5. Go to Weebly and edit your site.

   

6. Open the HTML/CSS Editor (Theme --> Edit HTML/CSS)

   

7. Upload your files (Assets +, Upload Files)

   

8. Go to the "Build" tab, navigate to the page where you want to install the map, and drag "Embed Code" onto the page.

   

9. Click on the widget, select "Edit Custom HTML" and paste in the following snippet.

   <script src="/files/theme/mapdata.js"></script>
   <script src="/files/theme/usmap.js"></script>    
   <div id="map"></div>

   Notice that the urls are relative urls that point to your theme files.

   

10. Publish your webpage and you should see the map on your site!