admin – Super Interactive Maps

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 https://stackoverflow.com/questions/10142232/google-charts-geochart-zoom-in-closer

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.

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.

VIEW DEMO

Hide Other Regions

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

VIEW DEMO

Belgium

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

VIEW DEMO

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.

Miami

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

VIEW DEMO

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.

Armenia

Pop up information window to showcase video.

Store Locator

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

Mongolia

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

VIEW DEMO