With Google map’s new visual refresh, I’ve had to tweak a lot of the custom map colors for Hotwire’s hotel map. While many of the things were better, some stay the same… Here’s my learning and some tips to anyone looking very closely at styling google maps.

Color polygons still don’t play nice with labels:

With V3, you still cannot put a polygon of color underneath Google’s map labels. Thus important map wayfaring indicators are hidden the more opaque you make your polygon’s fill.

Due to this, fill color can’t be very opaque or else labels won’t show through. And the strength and contrast of the color is lost. See how red is now pink. Another side-effect of less opaque fills is that the color behind it shows through more.

Originally, I adjusted the map colors to reduce the visual noise of the streets and brightened the water color to better match our brand
Originally, I adjusted the map colors to reduce the visual noise of the streets and brightened the water color to better match our brand
In order to achieve a strong color in our selected state, I made the fill very opaque. One problem with this is that the street labels can't show through. Google maps doesn't allow us to  adjust the layer order to put the labels above the polygons.
In order to achieve a strong color in our selected state, I made the fill very opaque. One problem with this is that the street labels can’t show through. Google maps doesn’t allow us to adjust the layer order to put the labels above the polygons.
Google maps meanwhile adjusted it's base visual styles
Google maps meanwhile adjusted it’s base visual styles. Note the lack of yellow arterial streets! Unfortunately the local streets and the land gets darker.
I again had to make adjustments to the visual hierarchy of the streets and the color of the water but based on the new visual style
Thus new adjustments to the visual hierarchy had to be made. Overall we wanted a lighter, brighter feeling with less point of interest labels (so people could focus on our polygon content).
I also adjusted the treatment of the polygons to improve label visibility. I use stroke width and stronger arterial street colors so that they show through.
I also adjusted the treatment of the polygons to improve label visibility. For the selected polygons, I use a heavier stroke width and lessen the color opacity. This plus darker arterial street colors makes the new treatment much more legible. One unfortunate side effect is the fill color cannot be a strong red – it’s now pinkish (which isn’t exactly on-brand for us). But usability trumps branding for this case.
Before/after: London, Paris, Chicagor
Before/after: London, Paris, Chicagor

Leave a Reply

Your email address will not be published. Required fields are marked *