Title: Image Map Connect &#8211; Display Posts as Image Hotspots
Author: Igor
Published: <strong>January 20, 2024</strong>
Last modified: November 10, 2024

---

Search plugins

![](https://ps.w.org/image-map-connect/assets/banner-772x250.png?rev=3024415)

![](https://ps.w.org/image-map-connect/assets/icon-256x256.png?rev=3024415)

# Image Map Connect – Display Posts as Image Hotspots

 By [Igor](https://profiles.wordpress.org/dutchigor/)

[Download](https://downloads.wordpress.org/plugin/image-map-connect.1.0.2.zip)

 * [Details](https://test.wordpress.org/plugins/image-map-connect/#description)
 * [Reviews](https://test.wordpress.org/plugins/image-map-connect/#reviews)
 *  [Installation](https://test.wordpress.org/plugins/image-map-connect/#installation)
 * [Development](https://test.wordpress.org/plugins/image-map-connect/#developers)

 [Support](https://wordpress.org/support/plugin/image-map-connect/)

## Description

#### What is Image Map Connect Plugin?

Image Map Connect allows you to add any image to your WordPress website and make
it an interactive image map. On the image map you can:

 1. Display your existing and/or new posts as markers, including custom post types
 2. Show post details in a popup
 3. Filter markers
 4. Switch between layers
 5. Zoom in and out
 6. Use block settings to visually configure the plugin

The plugin uses built-in WordPress features where possible, for example it extends
the current posts and makes use of the default blocks like the query block.

#### What Can You Use the Plugin for?

Among other things, you can use the plugin provide an interactive

 * **Indoor maps** (e.g. for campus facilities, grocery stores, hotels, conferences,
   museums, and exhibitions)
 * **Simplified or stylised outdoor maps** (e.g. for events, routes, towns and villages)
 * **Infographics** to introduce a complex concept (e.g. technical frameworks)
 * **Technical drawings** to provide context
 * **Product images** with highlighted product features

#### Key Features

 * Create unlimited amount of image maps, layers, and markers
 * Embed the image map in block theme templates
 * Add the image map to block-based widget area in classic themes
 * Embed the image map in any pages or (custom) posts
 * Display your existing and new posts as markers, including custom post types
 * Show post details in a popup
 * Define image map center, height and zoom level
 * Modify marker and popup styling
 * Filter markers based on query loop or archive
 * Add multiple layers
 * The image map is responsive

### Help and Support

You can contact us in two ways at the moment:

 * If you have any questions, you can send an email to [info@flarehub.io](https://test.wordpress.org/plugins/image-map-connect/info@flarehub.io?output_format=md)
 * If you find a bug or have a feature request, you can send an email or report 
   an issue in our [Github repository](https://github.com/Flare-Hub/image-map-connect-plugin/issues).
   Please just make sure to search the existing issues and only report new ones.

## Screenshots

 * [[
 * Example of image map in action
 * [[
 * Process to set up the plugin
 * [[
 * Plugin Admin Page / Maps Tab
 * [[
 * Plugin Admin Page / Layers Tab
 * [[
 * Plugin Admin Page / Markers Tab – type: Posts
 * [[
 * Plugin Admin Page / Markers Tab – type: Standalone marker
 * [[
 * Block / Styling
 * [[
 * Block / Settings

## Blocks

This plugin provides 1 block.

 *   Image Map Connect Display image map with markers.

## Installation

#### Install Image Map Connect within WordPress

 1. Visit the plugins page within your dashboard and select ‘Add New’
 2. Search for ‘Image Map Connect’
 3. Activate the Image Map Connect plugin from your Plugins page
 4. See the section ‘After activation’ below.

#### Install Image Map Connect manually

 1. Upload the ‘image-map-connect’ folder to the /wp-content/plugins/ directory
 2. Activate the Image Map Connect plugin from your Plugins page
 3. See the section ‘After activation’ below.

#### After activation

 1. Click ‘Image Maps’ in WordPress sidebar menu
 2. You can find more instructions on the ‘Info’ tab
 3. Set up the plugin for your site by creating a map and adding layer(s) and markers.
    Tooltips included in the Maps/Layers/Markers tabs help you when filling in the 
    details.
 4. Add Image Map Connect block to your page or template.

## FAQ

### What is an image map?

Image map is an image with clickable areas that can be used e.g. to navigate to 
different pages of the same website.

### Can I add an image map to an archive page?

Yes. In a block theme, you can include the image map in the archive template. If
you embed it in the query loop block, only markers for the posts in the archive 
will be displayed on the image map.

In a classic theme, you can add it to the widget area. Any widgets on an archive
page will automatically only show markers for the posts in the archive.

### Can I make the image map style compatible with my theme?

Yes. The image map size, borders and background color are configurable. The popup
text styling is taken from your theme by default and you can further modify the 
style to align with your theme.

## Reviews

![](https://secure.gravatar.com/avatar/d7e321844050d216ee6ed9c3af0b0f7bfba3e4c224405cb26b858ebd79590c49?
s=60&d=retro&r=g)

### 󠀁[Great plugin](https://wordpress.org/support/topic/great-plugin-38627/)󠁿

 [churongcon](https://profiles.wordpress.org/churongcon/) March 16, 2024

Everything works well and it’s really great. Thank you. Please add feature: Search
box filter and redirect to floor after search

 [ Read all 1 review ](https://wordpress.org/support/plugin/image-map-connect/reviews/)

## Contributors & Developers

“Image Map Connect – Display Posts as Image Hotspots” is open source software. The
following people have contributed to this plugin.

Contributors

 *   [ Igor ](https://profiles.wordpress.org/dutchigor/)
 *   [ Daniela ](https://profiles.wordpress.org/daniela2017/)

[Translate “Image Map Connect – Display Posts as Image Hotspots” into your language.](https://translate.wordpress.org/projects/wp-plugins/image-map-connect)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/image-map-connect/),
check out the [SVN repository](https://plugins.svn.wordpress.org/image-map-connect/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/image-map-connect/)
by [RSS](https://plugins.trac.wordpress.org/log/image-map-connect/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.0.1

 * Fixed Fixed: missing sanitization of REST API field updates.

### Dependencies

This plugin makes use of multiple independent open source packages, both from NPM
and from Packagist. You can find a list of all the projects we have the pleasure
of including on this plugin in the composer.json and package.json files. For a more
comprehensive list, including all the packages that these packages use, see composer.
lock and package-lock.json.

### Development Instructions

#### Source Code

The code can be found on [Github](https://github.com/Flare-Hub/image-map-connect-plugin)

#### Development environment setup

This plugin makes use of both Node and Composer as development tools. For this reason,
ensure both are installed and execute the following commands after cloning the project:

 * `npm install`
 * `composer install`

The javascript for this plugin is built with the [wordpress scripts](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/)
package, which requires the javascript to be built. To build the corresponding assets,
run one of the following:
 – `npm run build` to execute wp-scripts build with the
correct configuration – `npm run watch` to execute wp-scripts start with the correct
configuration

There is also a Docker configuration included to aid the development. If you wish
to use this, make sure docker in installed and run `npm run start` to:

 * Start the docker containers
 * Execute wp-scripts start
 * Start browser sync to refresh the browser on code updates

#### Folder structure

This is a brief description of the folder structure used in this plugin.

**.vscode**
 plugin recommendations, settings and debug configuration for VS Code.

**app**
 The javascript source code.

**docker**
 The docker configuration and setup files.

**inc**
 The php classes and helper files.

**releases**
 The files to send to the wordpress plugin library.

**scripts**
 javascript development scripts

**root**
 The root folder contains all the necessary configuration files for all
the development tools used in this plugin:

 * Git
 * ESLint
 * Browsersync
 * Composer
 * NPM
 * Webpack

## Meta

 *  Version **1.0.2**
 *  Last updated **1 year ago**
 *  Active installations **100+**
 *  WordPress version ** 6.2 or higher **
 *  Tested up to **6.7.5**
 *  PHP version ** 7.2 or higher **
 *  Language
 * [English (US)](https://wordpress.org/plugins/image-map-connect/)
 * Tags
 * [floor plan](https://test.wordpress.org/plugins/tags/floor-plan/)[image hotspot](https://test.wordpress.org/plugins/tags/image-hotspot/)
   [Image Map](https://test.wordpress.org/plugins/tags/image-map/)[interactive image](https://test.wordpress.org/plugins/tags/interactive-image/)
 *  [Advanced View](https://test.wordpress.org/plugins/image-map-connect/advanced/)

## Ratings

 5 out of 5 stars.

 *  [  1 5-star review     ](https://wordpress.org/support/plugin/image-map-connect/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/image-map-connect/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/image-map-connect/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/image-map-connect/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/image-map-connect/reviews/?filter=1)

[Add my review](https://wordpress.org/support/plugin/image-map-connect/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/image-map-connect/reviews/)

## Contributors

 *   [ Igor ](https://profiles.wordpress.org/dutchigor/)
 *   [ Daniela ](https://profiles.wordpress.org/daniela2017/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/image-map-connect/)