Create Clickable Map Help Page

Create Clickable Map Help Page and enable enable more premium features.






How to pay with a credit/debit card without using a PayPal account?


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







How to change the color to each location individually






How to make the clickable map background transparent


The only way to create a background in the webite 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:



How to make your map responsive (mobile friendly)?

Example code:

Step 1: Copy the code below to notepad or any other text editor.

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

 

Step 2: Replace the URL https://createaclickablemap.com//map.php?&id=XXXXXXX&online=true with your maps URL (in your current code).

Step 3: Copy the whole new code and paste it where yo uwant your map to appear.

Step 4: Copy and paste the code below at the header 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>
<script> if (window.addEventListener){ window.addEventListener("message", function(event) { if(event.data.length >= 22) { if( event.data.substr(0, 22) == "__MM-LOCATION.REDIRECT") location = event.data.substr(22); } }, false); } else if (window.attachEvent){ window.attachEvent("message", function(event) { if( event.data.length >= 22) { if ( event.data.substr(0, 22) == "__MM-LOCATION.REDIRECT") location = event.data.substr(22); } }, false); } </script>





How to hide your map in smaller screens?

Example code:

First add the class="map" code to your iframe.

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

To hide the map for screen smaller than 800px.

Paste this code at the header of your website.

<style> @media only screen and (max-width: 800px) { .map { display: none; } } </style>



How to create and format the popup content?



Headings (h1, h2, h3, etc)

Formatting:

# This is an h1

## This is an h2

### This is an h3

Result:

This is an h1

This is an h2

This is an h3



Bold

Formatting:

This is a **bold text inside the asterisk**

Result:

This is a bold text inside the asterisk



Add a link

Formatting:

This is a link example: [WordPress Services](https://tailoredwp.com/).

Result:

This is a WordPress Services.

How to Add Links To Your Map Locations Content Box




Automatic Link

You can paste a plain URL and it will be automatically converted into a link.

Formatting:

Simple URL https://lusosystems.com

Result:

Simple URL https://lusosystems.com



Line Break

To create a line break you need to create a single line or double line space at the end of the paragraphs.



How to add popup images and links to your clickable map.

Add an image

Formatting:

![This is the image Alt text](https://www.createaclickablemap.com/images/ricardo-nunez.jpg)

Result:

This is the image Alt text





In order to link and scroll to an area on the same page, you need to use HTML anchor links.

Anchor links allows your to:

  • Link to anchor on same page
  • Link to anchor on another page

Follow these steps:

1. First, you need to create an anchor area ID in your website.

This is where your content is and where you want your link to point.

Example:

<h5><a id="example"></a>Florida</h5>

2. Second, format the URLs of your location, to include the pound sign (#) followed by the ID if anchor location you wnat.

Example:

#id

Your URL will look like this.

https://your-website.com/#florida

After you add your URLs to your map, when people click in your map locations it will automatically scrolldown to the area you point your links



How to setup a clickable map in Wix.com?

From your map iframe code, copy your map URL.

Go to your wix and use the Embed a Site element.

Add Elements -> Embed Code -> Embed a Site (not the Embed HTML)

Rename the id of that element and call it map

Setup the following script on the page you are trying to setup the map

import wixLocation from 'wix-location'; import wixLocationFrontend from 'wix-location-frontend'; $w.onReady(function () { $w("#map").onMessage( (event) => { wixLocationFrontend.to(event.data.data); } ); });


How to clear your cache aka delete CreateAClickableMap.com from your browsing history


On Chrome

Use the following shortcut

On a Mac: Command + Y or in a Windows computer: Control + Y

That will open your browsing history. Search for createaclickablemap.com

Use Command + A or Control + A to select all the results.

Click Delete.

Go back to your map and refresh. This will force your browser to refresh the map files and load any changes we did.

Here's a quick video (1 minute 15 seconds) showing how to do it.

Watch the video: https://www.loom.com/share/971a39c0aaaa4941b481aef0a7dc9964




100,000+ customers in 10+ years.

Used by Entrepreneurs, Businesses, Universities, Governments, all around the world.

All Maps Available

MAPS OF ASIA
EUROPE
 
UK MAPS
U.S. STATES
 
 
 
U.S. MAPS AND REGIONS
US CONGRESSIONAL DISTRICT MAP

SCHOOL DISTRICTS
AMERICAN CONTINENT
OTHER MAPS

Why CreateaClickableMap.com?

I created this HTML5 compatible tool because I paid a developer a ridiculous amount of cash to build a clickable map for me from scratch, and I wanted to save you time, hassle and money.

After you edit your map, click on "Generate Map Script" to retrieve the html that you can copy and paste for your website. You have the option of paying a small fee that will give you the ability to come back and edit the map later.

Thank you for using the tool. Cheers!

Quick Instructions

© 2024 Lusosystems - WordPress Services By Tailored WP
Contact Us   Privacy Policy   Terms of Use   Help