To style a Google map in WordPress, install GeoVerse Maps, add a Google Maps API key, select the Google Maps block and pick a style preset — Default, Bright, Dark, Light or Pale Dawn — or choose Custom and paste style JSON from Snazzy Maps. A dark map suits dark sites; a pale map in your brand's tones suits most others.
Why style the map
Google's default map is busy and colourful. On a carefully designed site — especially a dark one — it can look like a window into another website. A styled map:
- matches your design, so the contact page feels finished;
- draws attention to your marker, by muting everything else;
- reads better on dark pages, where a bright map glares.
What you need
- GeoVerse Maps (free, no paid version).
- A Google Maps API key with the Maps JavaScript API enabled. The keyless embed always uses Google's standard look; styles need the interactive map. See how to get an API key.
Use a preset
- Insert or select the Google Maps block.
- In the block settings, open the style options.
- Pick a preset:
| Preset | Best for |
|---|---|
| Default | Google's familiar look |
| Bright | Lively, colourful sites |
| Dark | Dark-mode sites, nightlife, tech brands |
| Light | Minimal, white sites — the map recedes, your marker stands out |
| Pale Dawn | Soft, warm neutrals for hospitality, wellness and lifestyle brands |
- Update the page and check it alongside the rest of your design.
Use a custom style from Snazzy Maps
Snazzy Maps is a free library of community-made Google Maps styles — monochrome, blueprint, vintage, neon and hundreds more.
- Find a style you like on Snazzy Maps and open it.
- Copy its JavaScript style array (the JSON that starts with
[and ends with]). - In the GeoVerse block, choose the Custom style and paste the JSON.
- Update and preview.
Tweak it to your brand
Style JSON is a list of rules, each with a featureType (water, roads, parks), an elementType (geometry, labels) and stylers (colour, visibility). To match your brand, edit a few colours:
[
{ "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#1e3a5f" }] },
{ "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#0f172a" }] },
{ "featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#334155" }] },
{ "featureType": "poi", "stylers": [{ "visibility": "off" }] }
]
Change the water, land and road colours to tones from your palette, keep labels readable, and save.
Make the marker stand out
A styled map is half the job; the marker is the other half. GeoVerse supports custom marker icons — use your logo mark or a pin in your accent colour. On a muted map, an accent-coloured pin is instantly visible.
Keep it usable
- Don't hide what people navigate by. Road names, transit stations and nearby landmarks help visitors find you. Hiding all points of interest looks clean but can backfire.
- Contrast on labels. On dark styles, check street names are readable.
- Test on a phone, outdoors if you can — very dark or very pale maps get hard to read in sunlight.
- Keep text next to the map. Your address, hours and a directions link in plain text work for everyone, including people who can't use the map. See maps and local SEO.
Dark sites: the whole picture
On a dark-mode site, combine:
- the Dark preset or a dark Snazzy style;
- a bright custom marker in your accent colour;
- info windows with short text (hours, phone);
- a Get Directions button — see how to add Google Maps directions.
Considering OpenStreetMap instead for styling or cost reasons? See Google Maps vs OpenStreetMap in WordPress.