How to add my maps to your website

This is a more in depth overview about ‘How to add my clickable maps to your website’ if you don’t have a Joomla or WordPress. (We have simple plugins for them)

When you purchase a clickable map package at what you get is everything you need to create and install your own clickable map for your website.

There are two essential parts to the package which I will explain but first the most important starting point is the the image size.

Most of my maps have a width of 600px ….that’s just one nice size that would fit neatly into a typical blog page and big enough to present the smallest of country states without too much difficulty when clicking the hot spot.

So be sure to allow the correct size for the space in your webpage before you acquire your specific map.

1. The Coordinates

Area Coordinates are the mapped out areas where you intend to have clickable hotspots in order for your visitor to click to an output url address or web page.

My area coordinates are a fixed set size according to the associated image size. So do not think that you can reduce the image size AND then attempt to reduce the coordinates, although it may be possible with sophisticated software it will still probably take you a month of sundays. Like wise it is possibly to edit parts of the coordinates but that isnt advisable either because the they will be related to the supplied image. I’ve taken great care to compliment coordinates with the map design and that’s what I want to talk about next.

What do I do with the coordinates?…and how do I add them to my web page?

In order for you to add a clickable map to your page, you need to follow a simple process, after all it’s just peices of code that you copy and paste like everything else you add to webpages.

In the package there will be three ways to add your code, so I am sorry if that sounds like it is going to be a little more complicated but i wanted to cover a few ways to accomodate different approaches for novices and dvelopers.

First and foremost is the standard html code using the familiar <area></area> tags. This complete code will be part of a full web page, however there are guides within the code to help you copy and paste straight into the source code your own page, or blog. Of course you will open the files in a text editor your favourite html editor like Dreamweaver

Secondly the same code will be presented in an entirely different way in a javascript external file with a javascript function to help with the output url. This is much neater and easier to work with and the external .js file can be tucked away in another folder in your website and save space in side your web page while editing or viewing your code. Just one line of code will set this into your web page easily.

Last but not least the exact code needed will be filed as a php include. Which is basically the same as a html page but ideal for those of you who work with php based websites and applications.

So there you have it….not one but three options to help you with your clickable map.

So now we are familiar with the coordinates and the html code, what about the image? Can’t have one without the other and although you can simply use the default design provided, yours may need to be different colors or include more text or overlays. Fortunately, I provide the raw map file in photoshop layers so that any one can construct a nice looking map by themselves…at the same time each area will be totally synchronized with the coordinates if you work with the original map borders.

2. Editable Photoshop Image

Adobe Photoshop files are generally written and read by Photoshop but most good graphics software will read the format. A photoshop file (PSD) will retain all the original file attributes that’s why it will be easier for you if I included the country border as one layer and the state borders as a separate layer. This will give a webmaster many possibilities to work with when designing an appropriate map. I would like to give a whole tutorial here at my website but right now all you need to know is that it will be easy to *adjust the supplied map for you or your web designer.

Briefly you will open the photoshop file in your copy of Adobe Photoshop or perhaps Paint Shop Pro and when you have edited the layers you will save the final web file as png, jpg or gif. I recommend saving in png format it is far the best quality for a map image on the web.

Now you will have the code and the image, that takes care of the basics but what about all this JQuery Plugin stuff?

Even though the core elements of a clickable map are the image and the area coordinates, what make my maps more interesting is the combination of the MapHilight JQuery Plugin ny David Lynch.

Now the hotspots come alive when the mouse moves over the map enhancing the user experience, similar to the effect you can get when your map is made entirely in Flash software.

Also as an extra enhancement the excellent EasyToolTip by Alen Grakalic is included and activated to give a more interesting ToolTip rather than the boring default ToolTip you have with your browser.Each plugin has it’s own variables that can be edited freely.

How do I put it all together!!?


For a standard web page get the code from the index file in the html folder and copy first the image tag to where you want the image to appear on your web page. Perhaps within a <div> so you can position that with your css.

<div><img src=”path/map.png” width=”600″ height=”800″ usemap=”#Map” style=”border-style:none; margin:0″ /></div>

Make sure the image file is correctly referenced in relation to your page on your server. If in doubt put the full address to your image that you have uploaded to your website images folder.

Next grab the code from the <map> tag to the last </map> tag and insert into your web page somewhere after the image tag.

That should at least be enough to test the clickable map from the browser. Next we need to reference the JQuery Plugins between the <head> tags of your web page.For all the JQuery associated files in the js folder and also a couple of essential functions within <script> tags

Something like this:

<script type="text/javascript" src="js/jquery-1.9.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.metadata.min.js"></script>
<script type="text/javascript" src="js/jquery.maphilight.js"></script>
 $(function() {
 $('.map').maphilight({fade: false}); /*set true for fading hover effect*/
 $('map > area').easyTooltip();

Somewhere there will be a css style if you want to use the easyToolTip JQuery Plugin so add this also in the <head> section

Last but not least, we will want to edit the fields in the code, especially the output urls (website addresses from our clickable links)

Each area will have a <a> tag. You place the link to your next webpage in the href=”" eg: href=”new_york.html”.  In this instance the title tag will be New York.

That’s all there is to it. Upload to your website and in your browser you should see a wonderful clickable map

All the guidance you need will be at this page and in the instruction guide in each zip file.If ever you have a problem be sure to contact me and I can always help you with any issues regarding my clickable maps.