Create Custom Maps with Clickable Areas

One of our members asked how to create a map with custom points to highlight specific areas.

In this tutorial, I’ll show you how to create custom maps by using the Image-Maps online tool.

Step #1. Create an Image-Maps account

• Go to Image-Maps’ registration page to create a free account.
• Type your email and password, then click the join up! button.

Step #2. Upload the image map

• Upload the image that you will use as a map. In my example, I’m uploading a map of my country.
• Click the Start Mapping button.

Wait to click the “continue link” until the new screen loads the image.

Step #3. Add points in the map

• Right click
• Create poly
• Set a url that will work as a link for this area
• Optionally set a Title, Alternative title and Id

Now, click over the map to draw a custom area. Every click will create a dot; create as many dots as you need to define an area inside the map.

Once you’ve joined all the dots, a message will come up asking to confirm this is a complete point.

• Click the save button

Repeat this process to add a new point.

Step #4. Get HTML code

• Right click
• Get code

• HTML code tab
• Scroll down to reach the embed code and copy-paste it in your site.

Step #5. Replace the image path

In the embed code, look for the image tag:

<img id="image-maps-2015-10-05-143809" src="http://www.image-maps.com/m/private/0/6kq7rht7s5a32563etvh3oobd2_mexico.png" border="0" width="600" height="403" orgWidth="600" orgHeight="403" usemap="#image-maps-2015-10-05-143809" alt="" />

Since the path to the map image points to the image-maps.com domain and will be deleted automatically 24 hours later, it’s highly recommended to upload that same file into your site, then set the new location by replacing the src value:

<img id="image-maps-2015-10-05-143809" src="/path/to/images/your-map.jpg" border="0" width="600" height="403" orgWidth="600" orgHeight="403" usemap="#image-maps-2015-10-05-143809" alt="" />

Step #6. Highlight the points

In the preview, when you put the mouse over the point, a link will be accessible. You’ll notice the cursor changes. However, that’s not enough visual indicator to show there is a clickable area. The next step will be to explain how to highlight the points inside the map.

• Download this zip
• Decompress the file
• Look for jquery.maphilight.min.js and upload into your site
• In the head of your site load jQuery and Maphilight plugin:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.maphilight.min.js"></script>

• Below, add more code to run Maphilight:

<script type="text/javascript">$(function() {
$('.map').maphilight();
});</script>

• In the html code of your map, add the class “map” to the image so the plugin can reach this element:

<img id="image-maps-2015-10-05-143809" src="/path/to/images/your-map.jpg" border="0" width="600" height="403" orgWidth="600" orgHeight="403" usemap="#image-maps-2015-10-05-143809" alt="" class="map" />

Step #7. End result

If everything is correct, you will see a background and border when you hover your mouse over that area:

This map can be embedded in WordPress, Joomla and Drupal. In some cases, it may be required to turn off the WYSIWYG editor to avoid the code being filtered.