Create a clickable map for your website!

The interface below allows you to easily modify all the various properties of your clickable United States map. These clickable maps are free for both personal and commercial use (licensed under GPLv3+). To grab the source code, visit our github.com page at https://github.com/switchingbits/clickable-map-maker.

Please note: All maps created on ClickableMapMaker.com are publicly-accessible and can be viewed by anyone on the Internet. Do not use sensitive information in your maps.

Global map settings

Map Display
Width of your map. Choose either px (pixels) for a fixed size or % (percentage) for a responsive, variable width. The height will be proportional.
General sizing for the map font. The font size will scale with the size of the map. Note: The font size for the map title, credit link, and pop-up is set to 16px.
The title that will appear at the top of the map.
A special 3-d effect that creates a shadow underneath each state when it is hovered over. It makes the state look like it is popping out off the map.
Background color that displays behind the map.
Fill color for all the states.
Fill color for when the user's cursor hovers over the state.
States that are individually marked as disabled will be filled with this color.
Labels will change to this color when the user hovers over either the state or the label.
Color for all the state labels that fall within the map.
Color for all the state labels that fall outside of the map.
The map and its states can be displayed as dotted, dashed, solid, or invisible.
Map border color.
Map Behavior
When a user hovers over a state, show the state's title and description in a pop-up dialog. NOTE: This pop-up will not display when the user mouses over a state name in the "show state listing" option (if enabled).
Advanced Options (Only editable through this interface when purchasing the "Save My Map" feature)
Javascript callback function for ALL states. You must leave the Global Link/URL blank for this to execute. Your Javascript function will be supplied with the state name. Ex: If you create a function called MapClickFunction then when each state is clicked it will call MapClickFunction with a stateId variable: MapClickFunction(stateId)

Your clickable map has been created!

One sec! Would you like to be able to easily edit your map whenever needed?

If you leave this page, your map will not save and you'll have to directly edit the Javascript code to edit it. However, for only $9.99:

  • You can continue to come back to ClickableMapMaker.com and easily edit your map through our convenient interface for up to a year
  • You will unlock the powerful global URL and global JS function features
  • You can remove the credit link easily

Please note: Your map code has been posted to a publicly-accessible URL/link. It can be viewed by anyone on the Internet.

Copy the code below. It contains all the HTML, CSS, and JS code needed to create your map. No other files or libraries are needed! Make sure to thoroughly test your map to make sure it works as expected with your own website's code.

Map preview

USA Map An image of the United States, with clickable states. TX WV FL IL MN MD RI ID NH NC VT CT DE NM CA NJ WI OR NE PA WA LA GA AL UT OH CO SC OK TN WY ND KY ME NY NV MI AR MS MO MT KS IN SD MA VA DC IA AZ AK HI

Summary of state changes

Any customized changes you make to the states will show in the table below.

settings

The name that might display as a tooltip or descriptive title. The state abbreviation (ie NJ, MA, PA) will remain on the main image.
Provide a short description for the state. HTML IS NOT ALLOWED. This will be used in your map's code for accessibility readers. This will be used for a state's pop-up details box if the longer description is left blank.
A longer description for the state. HTML IS ALLOWED. If this field is left blank, the map will use the short description for your pop-up details box.
Override the global fill setting to color this specific state. Check the checkbox to enable the override.
Override the global hover fill setting to color this specific state. Check the checkbox to enable the override.
Custom CSS class(es) name(s) to style this state on your own.
Makes the state inactive and unclickable. The state will be colored in the global disabled color setting.
settings saved!