Support » How-To and Troubleshooting » [Resolved] Is there a plugin available that can create a clickable US map?

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

  • Hello all,

    I’m needing a US map that allows a user to click on an individual state and be taken to that state’s page. Any ideas or plugins available? I’ve been searching everywhere but haven’t been able to find anything.


Viewing 15 replies - 1 through 15 (of 24 total)
  • 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" />

    This is amazing, thank you very much! You are a lifesaver.

    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:)

    Shirazdrum or Ryan,

    How did you get this to work? I uploaded the code to a page and linked one of the states to a category but all I get on the external page is an image of the map. The link does not work.


    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.

    The closing div tag was all I needed. Thanks Shirazdrum!

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

    Hi Dan,

    Unfortunately no. Images are static and there’s no way of doing that. The only possible way would be to recreate this whole image and links in flash and then make that scale-able.

    got it, okay, thanks!

    Another quick question – does Washington, D.C. work into this code at all?

    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)…

    Hi Dan,

    You can open this image in Fireworks or Photoshop and add the islands to it. the same for DC, you can just hotspot the name rather than the dot size that it represents.

    This is a free imagemap that i shared here, if you need a more sophisticated one with more options I can put one together for you that would match your site and have all the spots you like. You can click on my name and find my site there.



    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.

    Nice addition Randy. It’s amazing that so many people are looking for US image map, and I get 2-3 email a week for modification of this map. When I get a chance, I’ll write a plugin for it with select-able link inputs and a few different map looks. The problem is that if I make it dynamic with the database, it will add 50 something http requests to that page to get all the States information. I suppose i could do it with a dat file. This should help out a lot of people.

    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.

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘[Resolved] Is there a plugin available that can create a clickable US map?’ is closed to new replies.