How To: Add Interactive US Maps to Your WordPress Website
Today we’re going to be looking at a plugin which will let you embed an interactive map of the USA into your WordPress sites. Showing a map on your website is a great way to show visitors your nation-wide locations if you are a business, you could show states that your business offers coverage to, you could even use an interactive map for your personal blog to show where you have visited and so on.
A nice feature of this plugin is that you are able to create a hover popup for each state and insert any custom content you like in there – you could add a list of locations to it, you could have a contact form for each state or phone numbers for your business situated there.
The maps generated by this plugin are SVG (Scalable Vector Graphics) based, so it can be enlarged as much as you want while preserving the quality. As the output is HTML 5 it will work just fine with mobiles and tablets and the outputted map can be customized so you can match it in with your branding.
- The plugin is easily installed, customized then simply insert the map shortcode anywhere in your WordPress site.
- SVG (Scalable Vector Graphics) based, so it can be enlarged as much as you want while preserving the quality.
- Works perfectly on desktop along with mobile devices including Smartphones: iPhone, iPad, Tablets, etc.
- Responsive and fully resizable.
- 100% hand drawn dot by dot in Adobe Illustrator for highest quality and best optimization.
- Small file size > Faster load speed > Better for SEO and Google ranking.
- Compatible with all major browsers including Google Chrome, Firefox, IE9+, Safari and Opera.
- There is a map preview in the admin page for easy customization.
- “Restore Default” option, in case you want to get a new look.
- Very well organized admin panel as seen in this video.
- You can use the shortcode to add the same map in many pages.
- Full documentation included.
Using The Plugin
If you upload and activate the plugin, you will see a new menu item named “US Map” which is where you will be setting up your map. Following this link you will see the default map is displayed at the top and you can test it out by hovering over the states which currently just display the states name.
To the right of your map, you will see some controls for the general map colors, here you can adjust the border color, shadow color, shadow opacity, short names, hover color and lakes color. You should adjust these to match in with your website’s theme colors.
Underneath the map preview you will see a listing of every state on the map with a “+” toggle next to it, if you click the toggle it opens a box for that state wher you can change the color of it, the hover color, click color, enter a URL to visit when clicked if required and also a visual editor box so you can enter some content to show when hovered over.
You can click the image icon and enter a URL for an image to display or you can click the “Add Media” button to upload an image.
Here you can see how I changed the colors of a state and added my logo to be shown when hovered over:
When you have finished designing your map and want to add it to your site, simply grab the shortcode:
And paste this into a post or page and it will be displayed like so:
This plugin is available to purchase from CodeCanyon for just $15 which includes 6 months support which you can upgrade to 12 months support for an extra $4.50.
This plugin is a piece of cake to use, it’s got some nice customization options so you can match it with your existing site branding and powerful enough to let you add custom content for each state and change colors of each state and so on. It’s light weight and works on mobile devices so check it out if you need to add an interactive map to your WordPress website.