Skip to main content

Customizing Map Colors with Google Maps Styles

RP Promap allows you to fully customize the visual appearance of your maps using Google Maps JavaScript style arrays.

Updated over 3 weeks ago

RP Promap allows you to fully customize the visual appearance of your maps using Google Maps JavaScript style arrays. This gives you precise control over colors, visibility, and emphasis for roads, land, water, labels, and administrative boundaries — helping your maps match your brand or visual theme.


What Are Map Style Arrays?

A map style array is a JSON array made up of style rules. Each rule targets a specific feature type (like roads or water) and an element type (like geometry or labels), then applies one or more stylers such as:

  • color

  • lightness

  • saturation

  • visibility

  • gamma

RP Promap passes this style array directly to the Google Maps JavaScript API.


Where to Apply Styles in RP Promap

In RP Promap, map styles are configured in the Map Settings panel:

  1. Open your map in RP Promap

  2. Navigate to Map Settings → Appearance

  3. Paste your Google Maps style array into the Map Style JSON field

  4. Save and refresh the map

Changes are applied instantly on reload.


Example: Custom Gold & Neutral Theme

Below is a complete example of a Google Maps style array that applies a gold-toned color palette, reduces visual noise, and hides unnecessary points of interest.

[   {     "featureType": "administrative",     "elementType": "geometry.fill",     "stylers": [       { "color": "#8b8b8b" },       { "saturation": "0" }     ]   },   {     "featureType": "administrative",     "elementType": "geometry.stroke",     "stylers": [       { "color": "#b4934a" }     ]   },   {     "featureType": "administrative",     "elementType": "labels.text.fill",     "stylers": [       { "color": "#b4934a" }     ]   },   {     "featureType": "landscape",     "elementType": "geometry.fill",     "stylers": [       { "color": "#b4934a" },       { "lightness": "85" }     ]   },   {     "featureType": "poi",     "elementType": "all",     "stylers": [       { "visibility": "off" }     ]   },   {     "featureType": "road",     "elementType": "geometry.fill",     "stylers": [       { "color": "#b4934a" },       { "lightness": "60" }     ]   },   {     "featureType": "road",     "elementType": "labels.text.fill",     "stylers": [       { "color": "#b4934a" }     ]   },   {     "featureType": "water",     "elementType": "geometry.fill",     "stylers": [       { "lightness": "100" },       { "saturation": "80" },       { "color": "#b4934a" },       { "gamma": "1.70" }     ]   } ]

Understanding Key Style Sections

Administrative Areas

Controls borders, regions, and political boundaries. Useful for highlighting territories or service zones.

Landscape

Defines land color and brightness. Increasing lightness creates a softer background for overlays.

Roads

You can style all roads together or target specific types:

  • road.highway

  • road.arterial

  • road.local

This helps emphasize or downplay traffic infrastructure.

Points of Interest (POI)

Setting visibility: off removes business and landmark clutter — ideal for data-focused maps.

Water

Water styling is often used to add contrast or match brand colors.


Tips & Best Practices

  • Use muted backgrounds so RP Promap overlays stand out

  • Avoid overly saturated colors for readability

  • Hide features you don’t need (POIs, transit) to reduce noise

  • Test styles at multiple zoom levels

You can preview and generate styles visually using third-party tools, then paste the JSON directly into RP Promap.


Need Help?

If you need assistance creating a custom map theme or aligning styles with your Rose Perl Technology brand colors, contact RP Promap support.


© Rose Perl Technology

Did this answer your question?