Multiple Pins Map

A WordPress plugin that displays an interactive map with multiple location pins, powered by Leaflet and OpenStreetMap. Locations are pulled from your posts via Advanced Custom Fields (ACF).

Features

• Shortcode-based — drop [multiple_pins_map] into any page or post
• Responsive layout — desktop shows a synced list + map panel; mobile uses an accordion with per-location mini-maps (breakpoint: 980px)
• ACF-powered — reads latitude, longitude, address, directions URL, and custom pin icons from ACF fields
• Customizable — override post type, field names, map tiles, zoom, colors, fonts, and heights via shortcode attributes
• Custom SVG pins — per-location or default pin icons via URL
• Accessible — ARIA labels on list and map panels, keyboard-friendly list rows
• Translated — includes Italian, French, German, and Spanish translations

Requirements

Requirement	Version
WordPress	5.8+
PHP	7.4+
Advanced Custom Fields	Any recent version

The plugin also loads Leaflet, map tiles, and Google Fonts from external CDNs, so your site needs internet access on pages where the shortcode is used.

Installation

From a GitHub Release (recommended)

1. Go to the Releases page
2. Download multiple-pins-map.zip from the latest release
3. In WordPress admin, go to Plugins → Add New → Upload Plugin
4. Upload the zip file and click Install Now, then Activate

Manual install

1. Clone or download this repository
2. Copy the plugin folder into wp-content/plugins/multiple-pins-map/
3. Activate Multiple Pins Map under Plugins

Setup

1. Create your post type

By default the shortcode queries the structure post type. You can use any registered post type — just pass it via the post_type attribute.

2. Add ACF fields

Create the following ACF fields on your post type (field names are configurable via shortcode attributes):

Field name (default)	Type	Description
address	Text	Street address shown in the list and popups
latitude	Number / Text	Latitude coordinate
longitude	Number / Text	Longitude coordinate
map_url	URL	External link for the "Directions" button
pin_icon	Textarea	Inline SVG markup for a custom pin icon (optional)

Coordinate formats supported:

• Separate latitude / longitude number or text fields
• ACF Google Map field arrays — the plugin reads lat/lng or latitude/longitude sub-keys automatically

Posts without valid coordinates are skipped silently.

3. Publish locations

Create and publish posts with coordinates filled in. Only publish status posts are included.

4. Add the shortcode

[multiple_pins_map]

Place it in a page, post, or block that supports shortcodes.

Usage

Basic example

[multiple_pins_map]

This renders all published structure posts with the default ACF field names, sorted by menu_order ascending.

Custom post type and fields

[multiple_pins_map
  post_type="store"
  field_address="store_address"
  field_lat="store_lat"
  field_lng="store_lng"
  field_url="directions_link"
]

Styled example

[multiple_pins_map
  accent="#1a73e8"
  radius="8px"
  map_height="600px"
  map_height_mobile="400px"
  zoom="14"
  default_pin_icon="https://example.com/pin.svg"
]

Shortcode attributes

Query

Attribute	Default	Description
post_type	structure	WordPress post type to query
posts_per_page	-1	Number of posts (-1 = all)
orderby	menu_order	WP_Query orderby parameter
order	ASC	Sort order: ASC or DESC

ACF field mapping

Attribute	Default	Description
field_address	address	ACF field for the location address
field_lat	latitude	ACF field for latitude
field_lng	longitude	ACF field for longitude
field_url	map_url	ACF field for the directions/external URL
field_icon	pin_icon	ACF field for per-location SVG pin markup

Map behavior

Attribute	Default	Description
zoom	15	Map zoom level (1–19)
fit_bounds	true	Auto-fit map to show all pins (when more than one)
tiles	OpenStreetMap URL	Leaflet tile layer URL template
tile_attribution	OSM attribution HTML	Attribution string for the tile layer
tile_subdomains	abc	Subdomains for tile servers (e.g. {s} placeholder)
default_pin_icon	(empty)	URL to an SVG file used as the default pin icon

Appearance

Attribute	Default	Description
accent	(theme default)	Accent color (CSS hex, e.g. #1a73e8)
radius	(theme default)	Border radius for list rows (e.g. 8px)
map_height	540px	Map height on desktop
map_height_mobile	320px	Map height on mobile accordion
font_heading	(theme default)	CSS font-family for headings
font_body	(theme default)	CSS font-family for body text
load_fonts	true	Load bundled Google Fonts (Epilogue + Fraunces)

Customization

CSS custom properties

The plugin uses CSS variables on the .mpm wrapper. You can override them via shortcode attributes (accent, radius, map_height, etc.) or in your theme's CSS:

.mpm {
  --mpm-accent: #1a73e8;
  --mpm-radius: 8px;
  --mpm-map-height: 600px;
  --mpm-map-height-mobile: 400px;
  --mpm-font-heading: 'Georgia', serif;
  --mpm-font-body: 'Arial', sans-serif;
}

Available variables include --mpm-accent, --mpm-active, --mpm-text, --mpm-muted, --mpm-bg, --mpm-radius, --mpm-map-height, --mpm-map-height-mobile, --mpm-font-heading, --mpm-font-body, and more (see assets/css/mpm.css).

Custom tile providers

Pass a different tile URL and attribution:

[multiple_pins_map
  tiles="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
  tile_attribution="© OpenStreetMap © CARTO"
  tile_subdomains="abcd"
]

Custom pin icons

• Per location: store SVG markup in the ACF pin_icon field
• Global default: pass a URL to an SVG file via default_pin_icon

SVG content is sanitized server-side for security.

Translations

The plugin text domain is multiple-pins-map. Bundled translations:

Locale	Files
Italian	languages/multiple-pins-map-it_IT.{po,mo}
French	languages/multiple-pins-map-fr_FR.{po,mo}
German	languages/multiple-pins-map-de_DE.{po,mo}
Spanish	languages/multiple-pins-map-es_ES.{po,mo}

To add a new language, copy languages/multiple-pins-map.pot, translate it, compile to .mo, and place both files in languages/.

Releasing a new version

Releases are automated via GitHub Actions. To publish a new version:

1. Bump the version in two places inside multiple-pins-map.php:
   • Plugin header: Version: X.Y.Z
   • Constant: define( 'MPM_VERSION', 'X.Y.Z' );
2. Commit and push to the main branch

The Release workflow will:

1. Read the version from the plugin header
2. Verify it matches MPM_VERSION (fails if they differ)
3. Skip if tag vX.Y.Z already exists
4. Build multiple-pins-map.zip (WordPress-ready, with a top-level multiple-pins-map/ folder)
5. Create a GitHub Release tagged vX.Y.Z with the zip attached

Pushes to main that don't change the version are ignored — no duplicate releases.

What gets included in the zip

• multiple-pins-map.php
• assets/ (CSS and JS)
• languages/ (.mo and .pot files; .po source files are excluded)

Excluded: .git, .github, .cursor, build/, .DS_Store

Development

Project structure

multiple-pins-map/
├── multiple-pins-map.php   # Main plugin file (shortcode, queries, asset loading)
├── assets/
│   ├── css/mpm.css         # Styles and CSS custom properties
│   └── js/mpm.js           # Leaflet map logic (desktop + mobile)
├── languages/                # Translation files
└── .github/workflows/
    └── release.yml         # Automated release on version bump

Local testing

1. Symlink or copy the plugin folder into your local WordPress wp-content/plugins/ directory
2. Activate the plugin
3. Ensure ACF is installed and your test posts have coordinates
4. Add [multiple_pins_map] to a test page

License

This plugin is provided as-is. See the repository for license details.