Map Style googlemap_api · guide for designers
loading map

How it works

Every choice on this page is one line in config.php.

How the map looks is set entirely by variables in config.php, under the # googlemap_api comment. Change an option on the left, watch the map on the right, then copy the finished lines back into the file.

The controls

Map style options

Grouped the same way they are grouped in the file, in the same order — after Spot, which is not part of the block but decides what one option in it can do. Open a group, change a value, and the map redraws. Every value shown as empty means “leave the line blank and let Google decide”.

The one setting that is not on this page

Road, water and label colours live in the Map ID

The old map sections carried a long $map_style_string — a wall of JSON that recoloured every feature of the map. The new section does not. Those colours now live in the Google Cloud console, saved against a Map ID, and config.php only names the ID.

Before

A style pasted into the file

$map_style_string='[{"featureType":"water", …'

Unreadable, copied from site to site, and impossible to change once without touching every file that holds a copy.

Now

A style the map points at

$googlemap_api_map_id = "2b2f496316d3104ea334ff9b";

The style is edited visually in the Cloud console and applies to every site using that ID, without a release. The same ID is also what makes the modern pins work at all.

What this means for you. If the roads and water need a different colour, that is a new Map ID, not a config change — ask the team to create one, then paste it into $googlemap_api_map_id. Everything else on this page is yours to set per site. Google's Cloud-based maps styling overview shows how those styles are created.

Paste a different Map ID into the field in Map above to compare two cloud styles side by side.

Watch out

The pin has four looks, and only one of them wins

The pin settings do not blend. They are checked in a fixed order and the first one that is filled in decides the whole pin — anything below it is ignored, silently.

  1. 1

    $googlemap_api_pin_card = true → the HTML card

    A small card with your text and logo. Wins over everything, including a pin image.

  2. 2

    $googlemap_api_pin_image is set → that image

    Your own graphic replaces the pin shape. Pin colours and the glyph no longer apply.

  3. 3

    Any pin_color / pin_glyph_* / pin_scale → a styled pin

    Google's pin shape in your colours. The one to reach for first — it stays crisp at every zoom and needs no asset.

  4. 4

    Everything empty → Google's red pin

    The default. Perfectly fine on a site that has no strong brand colour to spend here.

In the Pin group above, the settings that are currently being ignored are dimmed and tagged. That tag is the only warning you will ever get — the file itself says nothing.

When you are happy

Getting it back into the file

  1. 1

    Copy the changed lines

    The panel under the map lists only what you moved away from the shipped values. Use All style options if you would rather replace the whole block.

  2. 2

    Paste them under # googlemap_api in config.php

    Replace the matching lines — do not add a second copy of a variable. The last assignment in the file is the one that counts, which makes a duplicate very hard to spot later.

  3. 3

    Check it on the real site at three widths

    The map has its own height at each breakpoint, and a pin that is comfortable on desktop can cover half a phone screen. The device buttons above the map do the same check here.