Customising Google Maps breaks highway label blocks
        Posted  
        
            by 
                user2248809
            
        on Pro Webmasters
        
        See other posts from Pro Webmasters
        
            or by user2248809
        
        
        
        Published on 2013-09-23T12:02:16Z
        Indexed on 
            2013/10/17
            16:25 UTC
        
        
        Read the original article
        Hit count: 418
        
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);
}
© Pro Webmasters or respective owner