US Map for WordPress: General Settings Guide

To open this section, go to US Map → Maps, select the map you want to edit, and open the General Settings tab.

If you have created multiple maps, use the Select a map dropdown at the top of the page to choose the one you want to configure.

The Maps dashboard button opens the list of all maps created with the plugin.

Map Settings

The Map Settings block contains the primary layout, display, tooltip, zoom, and border options.

Map Name and Responsive Layout

The Map name is used to identify the map in the WordPress dashboard. It does not have to match the title displayed on the website.

The Layout type option determines how the map responds to the available space:

• Not Responsive uses the fixed width and height entered in the settings.
• Responsive automatically adjusts the map to the width of its container.

We recommend using the Responsive mode in most cases. It allows the map to adapt to different screen sizes and generally provides better results on mobile devices.

When Responsive mode is enabled, the fixed Map width and Map height fields are unavailable. Instead, you can use Max width to prevent the map from becoming too large on wide screens.

For example, if the maximum width is set to 980 pixels, the map can become smaller when placed in a narrow content area, but it will not grow beyond 980 pixels.

List of Names

The List of names section allows you to display a list of state names to the left of the map or use a dropdown list.

Additional options control whether inactive areas are included and what happens when a visitor moves the pointer over a state name. You can also adjust the width and font size of the list.

This feature is optional and can be left disabled when visitors are expected to interact directly with the map.

Zooming Capabilities

The zooming options allow visitors to enlarge the map and move around it. You can enable zooming for all devices or only for mobile devices, display zoom controls, and configure the maximum zoom level and zoom step.

These settings are more useful for large and detailed maps, especially the World Map. Zooming is usually not necessary for the United States map, so most websites can leave it disabled.

Other Display and Tooltip Settings

The lower part of the Map Settings block includes several additional options for labels, tooltips, borders, and hover effects.

Hide shortnames removes the state abbreviations displayed on the map.

Enable shadows adds a shadow effect to states when visitors interact with them. The shadow width can be adjusted in the field below.

With Pin tooltip on click enabled, the tooltip remains visible after a state is clicked instead of disappearing when the pointer leaves the state.

The Center tooltip on mobile devices option displays the tooltip in a centered position on smaller screens. This can make longer tooltip content easier to read on smartphones. The Centered tooltip width setting controls how much of the screen width the tooltip occupies.

The border settings let you specify:

• the default state border color;
• the border color on hover;
• the border width.

These settings can be useful when the map uses light colors or when stronger visual separation between states is required.

Content Info

The Content info block determines where detailed content appears after a visitor clicks a state, point, or group.

Content Display Location

The plugin provides three locations for the additional information area.

At right displays the content in a panel to the right of the map. This layout works well on pages with enough horizontal space and is commonly used for sales territory maps, location directories, and representative contact details.

At bottom displays the content below the map. This is often a better choice for narrow content columns and layouts that need to work consistently on mobile devices.

Custom HTML container sends the content to a separate HTML element in your page or template. This option is intended for custom layouts where the standard right or bottom position is not suitable.

The best option depends on the page design and the amount of content assigned to each state.

Additional Content Options

The Use ajax to load info option loads the selected content through AJAX. This allows the information area to update without reloading the entire page.

When Scroll to info area on click is enabled, the page automatically scrolls to the information area after a visitor clicks the map. This can be especially useful when the content is displayed below the map or when the map is tall on mobile devices.

The Default content editor lets you add text, images, links, or other content that appears in the information area before a state, point, or group is selected.

For example, you can use the default content to provide instructions such as:

Click a state on the map to view contact details.

Font Sizes and Colors

The Font sizes and colors block controls the appearance of state labels and tooltip text.

Names Displayed on the Map

The settings in the left column apply to names and abbreviations displayed directly on the map.

You can configure the font family, font size, default color, and hover color. A text stroke can also be enabled to improve readability when labels are displayed over colored states.

The stroke settings include its color, width, opacity, and hover color.

A light label with a dark stroke, for example, can remain readable across states with different fill colors.

Tooltip Text

The settings in the right column control the text displayed inside tooltips.

The Tooltip name fields apply to the state or point name, while the Tooltip comment fields apply to the additional content shown below it.

You can specify a separate font family, font size, and color for each part. When custom typography is not required, these fields can be left unchanged so the map uses its default styles.

Performance Settings

The final block contains options that affect how the plugin generates and loads the map code.

Enable Settings Caching

This option caches the processed map settings and helps increase the map loading speed.

We recommend leaving it enabled unless you are troubleshooting a problem or have a specific reason to disable caching.

After changing map settings, remember to save the changes so that the cached configuration can be updated.

Minimize Code Output

With this option enabled, the generated map code is output in a single line.

This keeps the source code more compact but does not change the visible appearance or functionality of the map.

Delay JavaScript Output

This option moves the generated JavaScript output to the end of the page.

Loading the script later can improve compatibility with page layouts or scripts that need the page content to be available before the map is initialized.

If the map does not appear correctly after enabling this option, disable it and test the page again.

Old AJAX Queries

The Old AJAX queries option provides an alternative AJAX mode for compatibility with other WordPress plugins.

You normally do not need to enable it. Use this option when the map has problems working alongside another plugin, particularly when content does not load or an AJAX-related conflict occurs.

Recommended Starting Configuration

The General Settings tab contains many options, but most websites only need a small number of changes to get started.

For a typical interactive US map, we recommend the following configuration:

• Set Layout type to Responsive.
• Use Max width to match the content width of your website.
• Enable Center tooltip on mobile devices if tooltips contain more than a few words.
• Display additional content at the right for wide layouts or at the bottom for a more mobile-friendly layout.
• Leave zooming disabled unless visitors need to examine the map in greater detail.
• Keep Enable Settings Caching enabled.
• Enable Old AJAX queries only when troubleshooting compatibility problems.

These settings provide a responsive and practical starting point. You can then adjust the labels, tooltips, borders, content location, and other options to match the design and purpose of your website.

The next configuration tab, Detailed Settings, lets you customize individual states, including their colors, links, tooltip content, and additional information.