Is there a plugin available that can create a clickable US map?

Copy and paste this code to your page. the width is 800px, so if you needit smaller, you need to work on it.

<div style="height: 495px; width: 800px; "><map name="ImageMap_1_1163747142" id="ImageMap_1_1163747142">
<area href="/wiki/Alabama" shape="poly" coords="537,310,556,377,518,382,518,395,506,391,504,312" alt="Alabama" title="Alabama" />
<area href="/wiki/Alaska" shape="poly" coords="127,381,128,451,148,457,171,481,171,491,153,491,132,461,98,456,83,473,10,482,55,456,34,431,43,391,60,375,89,365" alt="Alaska" title="Alaska" />
<area href="/wiki/Arizona" shape="poly" coords="110,330,159,362,191,368,204,271,134,258,131,272,123,272,117,290,126,304" alt="Arizona" title="Arizona" />
<area href="/wiki/Arkansas" shape="poly" coords="409,289,408,337,416,350,460,350,472,311,479,295,467,290" alt="Arkansas" title="Arkansas" />
<area href="/wiki/California" shape="poly" coords="23,137,76,151,61,203,117,283,115,289,124,303,112,329,76,325,34,279,11,162" alt="California" title="California" />
<area href="/wiki/Colorado" shape="poly" coords="214,196,308,207,304,276,206,267" alt="Colorado" title="Colorado" />
<area href="/wiki/Connecticut" shape="poly" coords="683,154,683,172,705,163,703,150" alt="Connecticut" title="Connecticut" />
<area href="/wiki/Delaware" shape="poly" coords="663,199,667,225,678,225,674,213" alt="Delaware" title="Delaware" />
<area href="/wiki/Florida" shape="poly" coords="610,378,648,455,632,486,617,487,596,434,574,394,553,405,521,393,521,384,556,379,556,384" alt="Florida" title="Florida" />
<area href="/wiki/Georgia_(U.S._state)" shape="poly" coords="537,307,572,304,614,348,609,380,557,381" alt="Georgia" title="Georgia" />
<area href="/wiki/Hawaii" shape="poly" coords="183,423,180,461,216,491,283,492,286,465,244,424" alt="Hawaii" title="Hawaii" />
<area href="/wiki/Idaho" shape="poly" coords="141,40,128,89,134,97,121,117,114,159,189,172,197,131,172,128,167,106,158,109,160,88,146,60,152,42" alt="Idaho" title="Idaho" />
<area href="/wiki/Illinois" shape="poly" coords="463,184,450,219,470,243,467,254,486,275,496,274,505,243,501,189,493,174,461,179" alt="Illinois" title="Illinois" />
<area href="/wiki/Indiana" shape="poly" coords="503,191,502,260,527,254,542,237,537,185" alt="Indiana" title="Indiana" />
<area href="/wiki/Iowa" shape="poly" coords="385,164,379,179,391,215,446,215,454,204,461,188,451,165" alt="Iowa" title="Iowa" />
<area href="/wiki/Kansas" shape="poly" coords="307,224,301,278,407,280,407,243,401,238,404,231,393,224" alt="Kansas" title="Kansas" />
<area href="/wiki/Kentucky" shape="poly" coords="485,286,565,275,582,259,569,241,544,234,528,258,502,261" alt="Kentucky" title="Kentucky" />
<area href="/wiki/Louisiana" shape="poly" coords="421,407,426,382,416,367,418,351,461,351,463,363,456,385,479,385,488,396,495,416,456,421" alt="Louisiana" title="Louisiana" />
<area href="/wiki/Maine" shape="poly" coords="698,93,709,124,713,131,748,88,740,74,728,50,708,47" alt="Maine" title="Maine" />
<area href="/wiki/Maryland" shape="poly" coords="611,211,611,219,631,212,649,222,648,229,658,232,666,247,677,224,665,224,662,202" alt="Maryland" title="Maryland" />
<area href="/wiki/Massachusetts" shape="poly" coords="681,142,682,155,708,150,715,156,733,158,733,143,713,134" alt="Massachusetts" title="Massachusetts" />
<area href="/wiki/Michigan" shape="poly" coords="454,95,463,109,497,124,511,187,554,183,562,159,540,107,485,71" alt="Michigan" title="Michigan" />
<area href="/wiki/Minnesota" shape="poly" coords="374,66,380,119,378,123,385,130,385,164,451,164,451,155,428,140,426,125,434,105,464,80,403,72,399,59" alt="Minnesota" title="Minnesota" />
<area href="/wiki/Mississippi" shape="poly" coords="474,314,503,311,506,394,488,395,478,383,456,383,464,356,463,346" alt="Mississippi" title="Mississippi" />
<area href="/wiki/Missouri" shape="poly" coords="392,216,393,224,406,240,407,288,472,287,468,295,476,295,486,279,466,254,469,245,447,218" alt="Missouri" title="Missouri" />
<area href="/wiki/Montana" shape="poly" coords="154,41,149,58,162,87,159,106,167,103,174,127,196,128,198,123,285,132,293,63" alt="Montana" title="Montana" />
<area href="/wiki/Nebraska" shape="poly" coords="284,169,281,204,307,206,307,221,396,224,384,181,355,174" alt="Nebraska" title="Nebraska" />
<area href="/wiki/Nevada" shape="poly" coords="77,152,150,167,130,270,122,270,118,285,61,204" alt="Nevada" title="Nevada" />
<area href="/wiki/New_Hampshire" shape="poly" coords="692,95,688,140,711,134,697,91" alt="New Hampshire" title="New Hampshire" />
<area href="/wiki/New_Jersey" shape="poly" coords="668,173,667,188,673,193,665,200,675,212,687,187,680,182,680,176" alt="New Jersey" title="New Jersey" />
<area href="/wiki/New_Mexico" shape="poly" coords="204,267,290,275,281,364,204,360,202,370,189,366" alt="New Mexico" title="New Mexico" />
<area href="/wiki/New_York" shape="poly" coords="607,148,597,171,658,159,667,170,680,174,680,180,687,184,707,169,685,171,682,154,682,139,670,103,648,107,629,139" alt="New York" title="New York" />
<area href="/wiki/North_Carolina" shape="poly" coords="589,274,556,305,597,298,624,300,641,313,682,278,670,258" alt="North Carolina" title="North Carolina" />
<area href="/wiki/North_Dakota" shape="poly" coords="293,63,288,115,380,120,373,67" alt="North Dakota" title="North Dakota" />
<area href="/wiki/Ohio" shape="poly" coords="545,234,567,238,572,244,596,203,592,178,563,187,553,184,538,186,542,229" alt="Ohio" title="Ohio" />
<area href="/wiki/Oklahoma" shape="poly" coords="290,276,407,281,412,340,359,331,331,324,331,290,288,288" alt="Oklahoma" title="Oklahoma" />
<area href="/wiki/Oregon" shape="poly" coords="50,66,22,121,22,135,113,157,118,114,131,98,125,87,83,87,61,81,60,69" alt="Oregon" title="Oregon" />
<area href="/wiki/Pennsylvania" shape="poly" coords="591,175,597,213,660,200,671,192,665,186,667,171,658,159" alt="Pennsylvania" title="Pennsylvania" />
<area href="/wiki/Rhode_Island" shape="poly" coords="708,149,713,156,707,163,702,153" alt="Rhode Island" title="Rhode Island" />
<area href="/wiki/South_Carolina" shape="poly" coords="572,303,616,349,638,314,625,301,597,297" alt="South Carolina" title="South Carolina" />
<area href="/wiki/South_Dakota" shape="poly" coords="289,115,380,120,377,124,383,131,383,163,380,179,355,173,313,169,285,168,286,152,286,134" alt="South Dakota" title="South Dakota" />
<area href="/wiki/Tennessee" shape="poly" coords="475,312,557,305,588,273,480,287" alt="Tennessee" title="Tennessee" />
<area href="/wiki/Texas" shape="poly" coords="289,285,281,366,229,360,255,405,276,418,290,404,307,407,340,467,367,477,367,444,423,408,426,381,416,344,403,337,331,325,330,288" alt="Texas" title="Texas" />
<area href="/wiki/Utah" shape="poly" coords="152,168,190,174,187,194,214,195,204,268,135,256" alt="Utah" title="Utah" />
<area href="/wiki/Vermont" shape="poly" coords="670,103,681,140,688,140,691,100" alt="Vermont" title="Vermont" />
<area href="/wiki/Virginia" shape="poly" coords="582,259,565,276,670,257,658,234,647,230,649,223,638,215,628,215,610,231,606,254" alt="Virginia" title="Virginia" />
<area href="/wiki/Washington_(state)" shape="poly" coords="48,63,61,71,61,79,93,85,132,91,140,41,73,21,50,28" alt="Washington" title="Washington" />
<area href="/wiki/West_Virginia" shape="poly" coords="637,217,628,216,620,232,611,230,607,248,598,257,584,260,575,248,579,229,592,219,594,201,597,214,612,212,612,219,628,211,635,212" alt="West Virginia" title="West Virginia" />
<area href="/wiki/Wisconsin" shape="poly" coords="436,108,434,117,428,122,428,141,449,154,450,175,458,180,494,175,501,130,495,128,488,119,457,105,449,100" alt="Wisconsin" title="Wisconsin" />
<area href="/wiki/Wyoming" shape="poly" coords="199,123,186,194,281,204,286,131" alt="Wyoming" title="Wyoming" />
<area href="/wiki/Delaware" shape="rect" coords="737,227,795,242" alt="Delaware" title="Delaware" />
<area href="/wiki/Maryland" shape="rect" coords="736,243,794,263" alt="Maryland" title="Maryland" />
<area href="/wiki/New_Hampshire" shape="rect" coords="563,28,655,50" alt="New Hampshire" title="New Hampshire" />
<area href="/wiki/New_Jersey" shape="rect" coords="723,204,793,224" alt="New Jersey" title="New Jersey" />
<area href="/wiki/Massachusetts" shape="rect" coords="567,73,646,94" alt="Massachusetts" title="Massachusetts" />
<area href="/wiki/Connecticut" shape="rect" coords="727,185,797,203" alt="Connecticut" title="Connecticut" />
<area href="/wiki/West_Virginia" shape="rect" coords="716,284,795,301" alt="West Virginia" title="West Virginia" />
<area href="/wiki/Vermont" shape="rect" coords="607,53,651,72" alt="Vermont" title="Vermont" />
<area href="/wiki/Rhode_Island" shape="rect" coords="720,163,796,184" alt="Rhode Island" title="Rhode Island" /></map><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Map_of_USA_with_state_names.svg/800px-Map_of_USA_with_state_names.svg.png" width="800" height="495" usemap="#ImageMap_1_1163747142" />

You are welcome. Make sure to save the map and upload to your own site. Of course don’t forget to put the links for the states:)

Paul,

You need to change the link to the link f your liking. The original code for state of Rhode Island looks like this:

<area href="/wiki/Rhode_Island" shape="rect" coords="720,163,796,184" alt="Rhode Island" title="Rhode Island" />

The modified code will look like this:

<area href="http://dreamdare.org" shape="rect" coords="720,163,796,184" alt="Rhode Island" title="Rhode Island" />

Where http://dreamdare.org is your link. The code above also is missing a closing div tag. Add a </div> to the end of the code.

Don’t forget to save the image and move it to your own server, with correct path pointing to it in the code.

Hi Shirazdrum,
Any way to make the image stretchable (to adjust with a with a stretchable website)?
Thanks!!
Dan

got it, okay, thanks!

Also, may you have a quick solution for Guam, etc. Maybe just list the clickable test along the side (like the small eastern seaboard states)…

This is a great tool! Thanks Shirazdrum. Here’s something to add to its use inside of a WordPress site:

You want to go to ONE specific page on your site and simply pass the name of the state to that page for processing. Here’s how…

1. Install/Activate “Cookie Monster” (CM) plugin for WordPress
2. Install/Activate “Peter’s Blog URL Shortcodes”
3. In the settings page for CM, set “URL Parameter 1” to “state”
4. Set the default and cookie duration for CM as you need.
5. Replace all the hrefs in Shirazdrum’s code as follows:
As shown, e.g.: href=”/wiki/Massachusetts”
Modify to be: href=”[blogurl]bystate/?state=Massachusetts” **
6. Create a new page with a slug called “bystate” **
7. In that page, the shortcode [state] is replaced by the state clicked on.
Example: You selected data for the U.S. State of [state].
Display: You selected data for the U.S. State of Massachusetts.

** This assumes that your WP Permalinks are set to “Post name” – if you use something else, modify the links accordingly.

That’s a great idea. I haven’t yet hacked on getting the District of Columbia included – not quite sure yet how the “labels” tie into the image map. Maybe just create a tiny map for D.C.!

Overall, it’s a great plugin to have – graphical stuff like this is always useful.