WP Manifestindependent plugin directory
manifest / media / interactive-map-pins

Interactive Map Pins

WordPress plugin: interactive map pins with hover animations between pins and city list

by Salman Ahmed · github.com/salmanrajz/interactive-map-pins · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/salmanrajz/interactive-map-pins/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/salmanrajz/interactive-map-pins ↗

Description

Add interactive map pins on any image. Upload a custom map (country, city, floor plan, anything), click to place pins, assign city/location names, and display it on your site with a shortcode. Pins and city list items cross-highlight on hover with smooth animations.

Features:

  • Upload any image as your map background
  • Click-to-place pins on the admin page (drag to reposition)
  • Each pin has: city name, tooltip text, and optional link URL
  • Frontend shortcode with responsive layout (map + city grid)
  • Hover a pin → highlights the matching city in the list
  • Hover a city → animates the matching pin on the map (bounce + pulse)
  • Touch-friendly on mobile
  • Lightweight — no jQuery on frontend, zero external dependencies
  • CSS-only animations (no JS animation libraries)

Installation

  1. Upload the interactive-map-pins folder to /wp-content/plugins/
  2. Activate the plugin through the Plugins menu
  3. Go to Map Pins in the admin sidebar
  4. Upload your map image and click on it to place pins
  5. Fill in city names and tooltips, then click Save
  6. Add the shortcode to any page or post:

[interactive_map]

Optional shortcode attributes:

[interactive_map title="Main Cities Coverage" subtitle="Our nationwide network." columns="2"]

  • title — heading above the map (optional)
  • subtitle — description below the heading (optional)
  • columns — city list grid columns: 1, 2, or 3 (default: 2)

Frequently Asked Questions

Can I use any image, not just a country map?

Yes. Upload any image — a mall floor plan, campus map, world map, custom illustration, etc.

Can I link city items to specific pages?

Yes. Each pin has an optional Link URL field. If set, the city item in the list becomes a clickable link.

Does it work on mobile?

Yes. The layout stacks vertically on small screens, and touch interactions are supported.

Changelog

1.0.0

  • Initial release