Create Custom Maps with Clickable Areas

| Coding Tutorials
custom map

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

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.
custom map

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

custom map

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
custom map

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.

custom map

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

custom map
  • Click the save button
custom map

Repeat this process to add a new point.

Step #4. Get HTML code

  • Right click
  • Get code
custom map
  • HTML code tab
  • Scroll down to reach the embed code and copy-paste it in your site.
custom map

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:

custom map

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.


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.