[resolved] Is there a plugin available that can create a clickable US map? (25 posts)

  1. RyanPayne
    Posted 3 years ago #

    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.


  2. shirazdrum
    Posted 3 years ago #

    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" />
  3. RyanPayne
    Posted 3 years ago #

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

  4. shirazdrum
    Posted 3 years ago #

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

  5. paulbuijs
    Posted 3 years ago #

    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.

  6. shirazdrum
    Posted 3 years ago #


    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.

  7. paulbuijs
    Posted 3 years ago #

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

  8. dad2201
    Posted 3 years ago #

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

  9. shirazdrum
    Posted 3 years ago #

    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.

  10. dad2201
    Posted 3 years ago #

    got it, okay, thanks!

  11. dad2201
    Posted 3 years ago #

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

  12. dad2201
    Posted 3 years ago #

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

  13. shirazdrum
    Posted 3 years ago #

    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.



  14. RandyKing
    Posted 3 years ago #

    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.

  15. shirazdrum
    Posted 3 years ago #

    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.

  16. RandyKing
    Posted 3 years ago #

    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.

  17. khill98
    Posted 3 years ago #

    Hi Shirazdrum, i updated the code as you instructed in the previous reply with a sample link but the map still isn't clickable. Am I missing something?

    Here's how I updated the code:
    [ Moderator Note: Please post code or markup snippets between backticks or
    use the code button. ]

    <map name="ImageMap_1_1163747142"> <area title="Illinois" shape="poly" coords="463,184,450,219,470,243,467,254,486,275,496,274,505,243,501,189,493,174,461,179" href="https://www.google.com/search?q=mixed+martial+arts+classes+illinois&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a" alt="Illinois" /></map>

    Here's the link to the page where the code is located:

  18. shirazdrum
    Posted 3 years ago #

    Your code is wrong. compare both codes side by side and you'll see your mistakes. Also you can't resize this map just by resizing the image because all the coordinates will come out wrong. you'll need to resize the map by javascript for example which is beyond your capability, based on the errors above. (No disrespect intended, i'm just being truthful.)

  19. guruj
    Posted 2 years ago #

    @Shirazdum I was wondering how hard it would be to make this into something that would populate from an calendar event post.
    Meaning when I post (using a normal blog post) a workshop in October it will have not only it's on page but will showup to a calendar page. It also can then show it in a widget.
    Is it possible to use that same info to make that sweet map of yours?

    I want to be able to post a class, add a location, date, & details. It would then add itself to the calendar page & Map page. All from one post.

    That would actually be the most killer thing & a jillion rock bands, workshops, fair travelers & trekies would love it.

    Thanks for your help!

    (looked at your site, if you switched web design for marketing we would be the same people. Never saw anyone else who offers video services & something else but me. Renaissance Men!)

  20. YikesPleaseHelp
    Posted 2 years ago #

    Hi there,
    Thanks for this map - i know all of you are getting this map to work... but when i cut and paste the code by shirazdrum, it doesnt work at all... any suggestions?

  21. YikesPleaseHelp
    Posted 2 years ago #

    Ah - Im thinking that it's my wordpress theme?

  22. ekimura
    Posted 2 years ago #

    Just wanted to add to this conversation with a simple 'thanks' to Chris and other contributors.

    @ Guruj - have you found anything out there like you described? I'm looking for a way for user generated listings to be cataloged into certain areas of a searchable website.

  23. Carlos Moreira
    Posted 2 years ago #

    Hello everyone!

    There's a plugin I developed that does similar stuff to what you are looking for. You can create maps from the US and color states, set markers in locations and display tooltips on hover and make them clicable.

    The code already shares works well, It's already useful, but if you want something more advanced, check out this example maps.


  24. jnscollier
    Posted 2 years ago #

    @carlosmoreirapt - Your plugin is awesome Carlos! Super-easy to set up and use. Very intuitive as well. Thanks for the link.

  25. carlosmural
    Posted 2 years ago #

    I couldn't find what I was looking for so I created this one:

    Enjoy! If you need help send me an email correourgente@hotmail.com

Topic Closed

This topic has been closed to new replies.

About this Topic