Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I'm trying to customise a Google map to use shades of a particular colour. It's working nicely except the blocks that contain major road names / numbers is illegible. I've figured out how to target styles to those elements, but setting the 'color' value sets both text and background to that colour. And no adjusting of saturation, gamma, lightness etc seems to make the text legible.

function initialize() {
    var latlng = new google.maps.LatLng(50.766472,0.284732);
    var styles = [
        {
            stylers: [
                { "gamma": 0.75 },
                { "hue": "#607C75" },
                { "saturation": -75 },
                { "lightness": 0 }
            ]
        },{
            featureType: "water",
            stylers: [
                {color: "#607C75"}
            ]
        }
    ];
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    var marker = new google.maps.Marker({
        position: latlng,
        title:"Living, dining, bedrooms by David Salmon"
    });
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    map.setOptions({styles: styles});
    marker.setMap(map);
}
share|improve this question
add comment

2 Answers

For the labels of the roads you don't have to set the color of the label, but only style the 'hue', 'saturation' and 'lightness'. For example:

var styles = [
    {
        "featureType": "road",
        "elementType": "labels.icon",
        "stylers": [
            { "Hue": "#0a9ad7" },
            { "saturation": 100 },
            { "lightness" : -20 }
        ]
    }
]

By changing the saturation and lightness you can change the difference between the line around the label and the color of the label itself.

share|improve this answer
add comment

You need to individually style the labels.text.fill and the labels.text.stroke.

var styles = [  { stylers: [{ hue: "#E29FC7" }]  },
    { featureType: "all", stylers: [{ visibility: "off" }]  },
    { featureType: "road", elementType: "all", stylers: [{ visibility: "simplified" }]  },
    { featureType: "road.arterial", stylers: [{ color: "#702076" }, { lightness: 50 }]  },
    { featureType: "road.highway", stylers: [{ color: "#702076" }, { lightness: 50 }]  },
    { featureType: "road.local", stylers: [{ color: "#e00073" }, { lightness: 50 }]  },
    { featureType: "road", elementType: "labels.text.stroke", stylers: [{ visibility: "off" }]  },
    { featureType: "road", elementType: "labels.text.fill", stylers: [{ color: "#000000" },{ lightness:5 },{ visibility: "on" }]  },
    { featureType: "road", elementType: "labels.icon", stylers: [{ visibility: "off" }]  },
    { featureType: "water", stylers: [{ visibility: "on" }]  },
    { featureType: "administrative", elementType: "labels.text.stroke", stylers: [{ visibility: "off" }]  },
    { featureType: "administrative", elementType: "labels.text.fill", stylers: [{ color: "#000000" },{ lightness:5 },{ visibility: "on" }]  },
];
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.