Subscribe to RSS feed
Clickable Maps For Webmasters

Clickable Maps For Webmasters

USAUnited States Clickable Map
UK & IRELANDUnited States Clickable Map
IRELANDIreland Clickable Map
GERMANYGermany Clickable Map
FRANCEFrance Clickable Map
EUROPEEurope Clickable Map
PORTUGALPortugal Clickable Map

How to make a clickable map of the USA for your website or blog

Briefly, I have created a simple video tutorial showing one way how I go about making a clickable map ….in this instance a map of the USA for a blog page 600px width. Even my video tutorial is almost 25 minutes long! as I describe the process from making an original map of the United States, tracing the borders, plotting the coordinates and adding the result to a blog page.

The source of the USA map is wikipedia and I use Corel Photo Shop Pro v10 to make the image. Any good graphic software will do using the standard tools, brush, pen, and bucket. When the image is complete I import to MapEdit a great software for plotting lots of coordinates, basically its the best little peice of software for creating image maps. That’s all the software you need as MapEdit creates a html file and all you do is cut and paste the code from there to your webpage or blog.

Here are the links to the video tutorials I have submitted to YouTube:

How To Make A Clickable Map of the USA for your website or blog part1

How To Make A Clickable Map of the USA for your website or blog part2

How To Make A Clickable Map of the USA for your website or blog part3

Washington Idaho Oregon California Nevada Montana North Dakota South Dakota Wyoming Utah Arizone Colorado Nebraska Kansas Oklahoma Texas Minnesota Iowa Missouri Arkansas Louisiana Missisippi Alabama Tennesee Kentucky Illinois Indiana Winsconsin Michigan Ohio West Virginia Maryland Delaware Pennsylvania New Jersey New York Vermont New Hampshire Massachusetts Maine Virginia North Carolina South Carolina Georgia Hawaii Alaska Florida Connecticut Rhode Island New mexico

How useful is a clickable map?..why would you want a clickable map of your country on your blog?

For a start, its great to separate your region specific information, your writings your products you have for sale??…I dont know…there are endless possibilities. So you will need to create a post for every clickable region, and for the United States that’s 50 posts, I don’t think there’s an easier way to do it but write them one by one. Think of the pages Google will love and the specific Google Adsense Ads that could earn you more revenue.

DOWNLOAD USA Clickable Map and Coordinates


How to add your clickable map into Joomla 1.5+

For some reason it’s not so easy just to add your image map code into your Joomla page using the default WYSIWYG TinyMice Editor.

Even when you think you can edit in ’source’ mode the editor strips away the image map ‘area’ tags that are essential for a clickable map to work. Also some other editors other than TinyMice may behave differently.

The quickest and most efficient way around this problem is to find a plug in that can be installed into Joomla 1.5+ that will make it possible to use these tags safely.

I recommend installing the excellent DirectPhp Joomla Plugin at http://www.kksou.com/php-gtk2/Joomla/DirectPHP-plugin.php

By including the clickablemaps.com code inside a php file… DirectPhp will allow the script to run without error.

I will be updating all my downloads to include a special php file specifically to help Joomla users add the code to their pages.

You can see an example of this at my Joomla test site

…also at this more spohisticated template from RocketTheme ……….. here

How to add my clickable maps to your Joomla page

I have a 3 part - 5 minute install and there shouldn’t be too many problems. Sometimes there are css and javascript conflicts but there are always solutions in the end.

1. You will upload 1 js folder with js files and sub folder with specific files for the clickable map…..in the root folder.

2. You will edit the Joomla template file that contains the header information(between the <head></head> tags.

In this header (usually in the template index,php file) …you will reference the clickable maps js files like you do with any script files.

3.  You install the PHPDirect plugin and add the ‘include code’ in the WYSIWYG editor for your page.

Directly….like this:

<?php include ('js/uk/uk_ireland.php'); ?>

or if you have problems (joomla editors add <pre></pre> and that may be styled with too much padding) add this code in HTML mode:

&lt;?php include ('js/uk/uk_ireland.php');?&gt;

and save your page.

Thanks to Andy R for help on Joomla install issues.

Full instructions are included in my downloads and of course DirectPhp has full support at it’s own website.

DISCLAIMER
Although I found this works fine for adding imagemap code in Joomla I cannot accept any responsibility if it affects your website or has conflicts with any other plugin. Please always backup your database and check thoroughly with the plugin documentation before you install any plugins in Joomla. Use at your own risk.


Terms of Use

Terms of Use
1. Important information

You should carefully read the following terms and conditions. Your purchase or use of our products implies that you have read and accepted these terms and conditions.
2. License

As a paid user for the clickablemaps.com product, the following rights are hereby granted to you:

* a non-exclusive and non-transferable license to use the product. To Use, modify the source code of the product to create your own website or multimedia presentation.

Limited usage granted

You may use the product on as many websites as you like belonging to either you or your client.
3. Restrictions

ANY DISTRIBUTIION, RESELL, PUBLISHING of clickablemaps.com product is STRICTLY PROHIBITED. All Images used in the product cannot be re-distributed separately in any other format. You may not sub-license, assign, or transfer this license to anyone else without prior written consent.

You may not claim intellectual or exclusive ownership to any of our products, modified or unmodified.
4. Editing of files

It is your responsibility to ensure you have the right software AND knowledge for editing the HTML files. The listed price of the product does not include guideline / tutorial on programming.

Please visit www.clickablemaps.com if you require customization service.
5. Our refund policy

Since our company is offering non-tangible irrevocable goods we do not issue refunds after the product is shipped, which you are responsible for understanding upon purchasing any article at our site.

clickablemaps.com reserves the right to change or modify these terms with no prior notice.