Create A Clickable Map by LusoSystems

After you click "generate map code", you will be given an embed code for the map you've created. Copy this embed code to your clipboard and paste it into the html portion of the webpage you will be placing the map on. If you are using Wordpress and would like to place the map on a POST or on a PAGE on your website, please make sure that you paste it into the HTML tab in the page/post editor, not the Visual tab.

If you pay the small fee to save your map, you will automatically get an email after paying that will include a special link in it. The link will take you back to this website and show you your map exactly how you had it before your purchase. You can update your map again from there, save it and generate the embed code to paste onto your website.

To make your map responsive use the following code.

Option 1:

Please this code where you want the map to appear:

<div style="position: relative; width: 100%; height: 0px; padding-bottom: 60%;" >
<iframe src="http://createaclickablemap.com/map.php?&id=XXXXXXX&online=true" style="border: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe>
</div>

Remember to replace the URL with your map URL.

Option 2:

If you don't want to use inline code.

Please this code where you want the map to appear:

<div class="map-container" >
<iframe src="http://createaclickablemap.com/map.php?&id=XXXXXXX&online=true" class="map"></iframe>
</div>

Place this code at the footer of your website.

<style>
.map-container {
position: relative;
width: 100%;
height: 0px;
padding-bottom: 60%;
}
.map {
border: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
</style>

The only way to create a background in the website is with a quick hack.

Step 1: On the background color, you need to click in the color picker, delete the ddefault code #FFFFFF and type: transparent

Important: When you delete the code, write transparent and hide the color picker. The code will show up again. Don't worry about it. Just save the map and you will see the result on your website

Step 2: On the iframe code, add the following code: allowtransparency="true"

Example:

Important: When you complete the payment without a PayPal account, the name of the transaction will be LusoSystems, Inc.