Smjrifle Interactive Maps with Google Maps and Leaflet

Smjrifle Interactive Maps with Google Maps and Leaflet brings powerful, customizable mapping functionality to WordPress with:

• Dual Engine Support: Google Maps or Leaflet (OpenStreetMap) fallback
• Marker Clustering: Group nearby markers at lower zoom levels
• Custom Markers: Use your own marker icons per location
• Snazzy Maps: 8+ preset map styles + custom JSON support
• Location Search: Built-in Autocomplete and Geocoding
• Location Cards: Display list of locations with grid layout
• Popups: Rich HTML popups with images, descriptions, and links
• Lazy Loading: Intersection Observer for performance
• Shortcode: [smjrgoma_map id=”123″] for easy embeds
• Per-Map Settings: Zoom, type, center, height, colors individually

Getting Started

1. Create a Map Post: Go to WordPress admin > Smjrifle Interactive Maps with Google Maps and Leaflet > Add New Map
2. Search & Add Locations: Use the search bar or click the map to place pins
3. Configure: Set zoom, map type, height, colors in the Settings tab
4. Style: Apply Snazzy Maps presets or custom JSON in the Style tab
5. Publish: Save the map and get your shortcode
6. Embed: Use [smjrgoma_map id=”123″] on any page/post

Admin Features

• Map Editor: Visual map for editing pins with drag-and-drop
• Location Manager: Edit title, image, description, and settings per marker
• Auto Geocoding: Click map to auto-fill address via Geocoding API
• Location Search: Autocomplete search to add locations instantly
• Snazzy Styles: Preset styles + custom JSON support
• Global Settings: Default marker icon, clustering, scroll behavior, lazy loading

Frontend Features

• Responsive Maps: Mobile-friendly with touch support
• Location Cards: Grid display of all locations with images
• Interactive: Click card to pan/zoom map and open popup
• Lazy Loading: Maps load only when visible (default on)
• Clustering: Markers group into clusters until you zoom in
• Popup Rich Content: Images, descriptions, links in marker popups
• Fallback Engine: Auto-switches to Leaflet if Google API unavailable

API Requirements

To use Google Maps, you need a Google API key with these APIs enabled:

• Google Maps JavaScript API
• Places API (for location search)
• Geocoding API (for address lookup)

Leaflet fallback requires no API key and uses OpenStreetMap tiles.

External Services

This plugin uses external services to provide map functionality.

Google Maps JavaScript API

• Used when a Google Maps API key is provided
• Loads scripts and map data from: https://maps.googleapis.com/
• Used for rendering maps, markers, clustering, autocomplete search, and geocoding
• Data sent: User-entered location queries (for search/geocoding)
• Privacy Policy: https://policies.google.com/privacy

OpenStreetMap (Leaflet fallback)

• Used when no Google Maps API key is provided
• Map tiles are loaded from OpenStreetMap servers
• Used for rendering maps and markers
• Data sent: Map tile requests based on user viewport
• Privacy Policy: https://wiki.osmfoundation.org/wiki/Privacy_Policy

Security

• Nonce Verification: All AJAX requests validated
• Capability Checks: Only authorized users can manage maps
• Input Sanitization: All user input sanitized per WordPress standards
• Output Escaping: All output properly escaped (esc_html, esc_attr, esc_url, wp_kses_post)
• Database Safety: Uses WordPress APIs for data storage

Settings

• Map Engine: Auto (Google if API key, else Leaflet), Google, or Leaflet
• Marker Icon: Global default marker PNG/SVG URL
• Clustering: Toggle marker clustering globally
• Cluster Style: Default, Modern, or Minimal (Google Maps)
• Scroll Zoom: Enable/disable scroll wheel zoom
• Lazy Loading: Load maps only when visible

Shortcode

[smjrgoma_map id="123" height="500" zoom="14" class="custom-class"]

• id (required): Post ID of the map
• height (optional): Map height in pixels (default: post setting)
• zoom (optional): Default zoom level (default: post setting)
• class (optional): CSS class for wrapper div