Forums

WordPress › Support » How-To and Troubleshooting

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

  1. RyanPayne
    Member
    Posted 6 months 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.

    Thanks!
    Ryan

  2. shirazdrum
    Member
    Posted 6 months 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
    Member
    Posted 6 months ago #

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

  4. shirazdrum
    Member
    Posted 6 months 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
    Member
    Posted 4 months 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
    Member
    Posted 4 months ago #

    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.

  7. paulbuijs
    Member
    Posted 4 months ago #

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

  8. dad2201
    Member
    Posted 1 month ago #

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

  9. shirazdrum
    Member
    Posted 1 month 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
    Member
    Posted 1 month ago #

    got it, okay, thanks!

  11. dad2201
    Member
    Posted 1 week ago #

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

  12. dad2201
    Member
    Posted 1 week 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
    Member
    Posted 1 week 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.

    Cheers,

    Chris

Reply

You must log in to post.

About this Topic

Tags