HTML Markers for Google Maps 2.0.0

HTML Markers for Google Maps lets you replace the default pin icons in WP Maps Pro with fully custom HTML markers. You can show prices, ratings, images, or any text right on the pin, style the background/text colors to match your brand, and keep everything responsive on mobile.

How It Works​

• Enable the add-on in WP Maps Pro and pick “HTML Marker” for your map.
• Design the marker by entering HTML (and optional placeholders) in the backend.
• Style it — choose background and text colors; add your own CSS if needed.
• Publish — the add-on renders markers as HTML elements (using Google’s Advanced Markers) and opens the normal info window on click.

Key Features​

• HTML pins instead of images — build branded, interactive markers.
• Dynamic content — show price, rating, status, logos, or links directly on the pin.
• Placeholders — pull map/location fields into your marker HTML.
• ACF compatible — use Advanced Custom Fields data in markers.
• Easy admin controls — manage colors and settings from the backend.
• Responsive design — markers adapt across desktop, tablet, and mobile.
• Built for WP Maps Pro — simple, native integration as an official add-on.

Technical Details​

• Product: HTML Markers for Google Maps (by WePlugins) — add-on for WP Maps Pro.
• Version: 2.0.0 • Last updated: June 18, 2025.
• API: Uses Google Maps JavaScript API AdvancedMarkerElement to render HTML/CSS markers.
• Admin UX: Marker HTML editor, dynamic placeholders, color controls.
• Compatibility: Works with standard WP Maps Pro maps and info windows.

Use Cases​

• Property or hotel maps that display the price on the pin (Airbnb-style).
• Store locators highlighting “Open now,” “New,” or promo badges on markers.
• Directories that need branded markers with logos or short labels.

Quick Setup Tips​

• Keep marker HTML lean; avoid heavy images to maintain map performance.
• Restrict your Google Maps API key to your domain (HTTP referrers) before going live.
• Test touch targets on mobile; a 36–44px clickable area improves usability.
• If a marker’s label overlaps, adjust font size/line-height in your marker CSS.

Create branded, interactive HTML markers in WP Maps Pro. Show prices, ratings, or text on the pin, use placeholders/ACF data, and style colors to match your site—fully responsive.