Frontend Zoom/Pan with CSS

The off-the-shelf Super Interactive Maps plugin is using Google GeoChart API, unfortunately the zooming buttons and functions are not available in this API by Google as per link here

However, the only way we can add zoom at this moment is using CSS and JavaScript functions that will zoom existing map provided by Google.

Important Notice: The source map is coming from Google and the quality of the map is subject to Google improvement and will be out of our control. We just add this zoom capability using CSS and JavaScript.

In Patch 1.8, you will have the option to set Map Zoom to Yes when adding/editing maps via the administrator.

Super Interactive Maps CSS Zoom Function Administrator

When the Map Zoom is activated, at frontend, your map will have a zoom icons at the bottom left which lets you zoom the map using CSS. You can also pan and move the map using your finger on PC, laptops, mobile devices and tablets.

Super Interactive Maps CSS Zoom and Pan Feature


Hide Other Regions

You can show only highlighted region and hide other regions like below, more details available in this knowledge base article here.



A map of Belgium shown by regions, click on the each region to view interactive rich content.


United States of America (USA) Maps

This is the United States map divided into colored regions with just simple hover tooltips. You can create other countries maps with their states/regions as well. There are over 300 maps included all in one plugin, click on the Map Demos from the menu to view more.

You can refer to the admin screenshot below to create US map like above.


Below is an example of interactive map in Florida, try click on the circle marker to see an interactive pop up window


Palm Beach

Click this location to view a pop up which showcase video and image content.


Click this location to view a pop up which showcase video and image content.




Custom Marker Map Icon

You can try to click on individual markers below, they have individual call to action which can be set via the administrator’s panel.



Pop up information window to showcase video.

Store Locator

Link to Store Locator (Super Store Finder is sold separately)


Link to a new window of Wiki site showing more information.

You can use FontAwesome which has a list of icons cheatsheet. Choose an icon and copy / paste it into Location Title and check the Hide title checkbox in the map creation page.

* Latest updates: You can’t select font-awesome icon from browser, you have to use this link and enter your font icon code on the left and copy the icon from the right side as circled below and paste it at the Location Title Text field.

Important: Make sure to choose Display Style as Text Label and Hide Marker checked as highlighted in RED SQUARE below.


Click Add Location button

Paste it inside Title field for your location, it should look like as per highlighted in screenshot below

More Custom Markers Examples