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
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/salmanrajz/interactive-map-pins/archive/refs/heads/main.zip

Readme

=== Interactive Map Pins === Contributors: salmanrajz Tags: map, pins, interactive, locations, hover, animation Requires at least: 5.6 Tested up to: 6.7 Stable tag: 1.0.0 Requires PHP: 7.4 License: GPLv2 or later

== 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

Read the full README on GitHub →