🎨 Customizing Store Locator Map Colors (With Examples)
Customizing your store locator’s map colors is done using Google Maps Styling (JSON) — not traditional CSS.
This guide shows real style examples, plus exactly how to apply them inside RP Promap.
🖼️ Map Style Gallery
Below are six common map styles you can use as inspiration:
Map Style Gallery
Included Styles:
Retro Style – warm beige + vintage tones
Dark Mode – modern dark UI (great for dark themes)
Silver Style – clean grayscale look
Minimalist – low contrast, distraction-free
Auburn Tones – bold orange/brown palette
Blue Water – enhanced water + park colors
🔗 Example Style Sources
You can browse and copy ready-made styles here:
Search for:
“dark”
“minimal”
“retro”
“grayscale”
⚙️ How to Apply a Map Style in RP Promap
Follow these steps:
1. Open Your Map Settings
Go to Apps --> Promap - RP --> Settings
Navigate to the Customize/Design tab
Click on the Map Design Tab
Under Map Styles Choose Customize
2. Copy a Style JSON
From a site like SnazzyMaps:
Click a style you like
Click “Copy JSON”
Example snippet:
[
{
"featureType": "water",
"stylers": [{ "color": "#0e171d" }]
}
]
3. Paste Into RP Promap
Find the field: “Customize Style”
Paste the full JSON
Save your changes
4. Refresh Your Store Locator
Your map will instantly update with the new colors.
⚠️ Important Notes
CSS vs Map Styling
❌ CSS cannot change map colors
✅ Map colors are controlled only via Google Maps JSON styles
What CSS Can Change
You can still customize the UI around the map:
/* Store list background */
.rp-store-list {
background: #111;
color: #fff;
}
/* Search input */
.rp-search-input {
border-radius: 8px;
border: 1px solid #ccc;
}
/* Map container */
.rp-map-container {
border-radius: 12px;
overflow: hidden;
}
Best Practice Combos
Theme | Recommended Map Style |
Dark UI | Dark Mode |
Minimal brand | Silver / Minimal |
Bold branding | Auburn Tones |
Nature / eco | Blue Water |
💡 Pro Tips
Match your map style to your brand colors
Use low-contrast maps for better marker visibility
Always test on mobile + desktop
Avoid overly busy styles (they reduce usability)
🚀 Summary
Use Google Maps JSON styles to control map colors
Use CSS for layout + UI styling
Combine both for a fully branded store locator