Overlay Maps: Regions map with Markers or Text Labels

The Google Geochart API, used by the plugin to generate the maps, doesn’t include an option to enable multiple display modes in the same map. So it’s not possible to have in the same map coloured interactive regions and text labels or markers. This is why the plugin doesn’t support this feature directly.

However with some ‘hacks’ it’s possible to overlay maps to achieve this effect. This feature is partially integrated with the plugin from version 1.6.6 (released in April 2015), but it’s not fully supported, as some features will not work as expected.

For this to work properly, some things are needed:

  • Responsive Mode and HTML tooltips need to be enabled in the settings;
  • You need to have 2 maps displaying the same region: one map with regions mode enabled, and the other can either be with markers or text labels (coordinates mode suggested).

When you have both maps ready, you can use the shortcode with this format:

show-map id="1" overlay="2"

Where id will be the ID of your regions map and overlay should be the ID of your markers or text map. This shortcode will display your regions map, with the markers or text labels from the other map on top.


US Map with Markers

United States Map Placeholder
United States Map
Coordinates Example Placeholder
Coordinates Example

In this example we have the regions map with the display content below action and the Markers (coordinates) mode with no action.

Germany Map

Map of Germany Placeholder
Map of Germany
Germany Placeholder

US Map with State Labels

USA - Election Map Placeholder
USA - Election Map
US State Labels Placeholder
US State Labels

Get advanced tab content for the labels map.

Some Limitations

  • Markers/Text and Region actions will be independent. For example, when using the action ‘Display Content Below’ on both maps, each will have a designated area for the message to display.
  • The ‘Display Content Above/Below’ will always default to display content below for the markers/labels map, in order for the markers to overlay correctly.
  • The zoom lens effect that appears when several markers are overlapping might not work as expected.