Create Custom Maps with Clickable Areas

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.

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Keith Mason
Keith Mason
9 years ago

Thanks for this tutorial – just to make sure before trying this – it is responsive right?

Many thanks 🙂

htmgarcia
9 years ago
Reply to  Keith Mason

Hi,

I’m glad you like it 🙂

I didn’t tested, however I don’t think is responsive.
Regards

John Hume
John Hume
8 years ago
Reply to  Keith Mason

It can be made responsive with a jQuery plugin [url=http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html]http://mattstow.com/experim…[/url]

cmsez
cmsez
9 years ago

Have you tested this in Safari 9.0?

htmgarcia
9 years ago
Reply to  cmsez

Hi @cmsez ,
Did you noticed an issue? The more details, the better, please 🙂
Regards

5
0
Would love your thoughts, please comment.x
()
x