Google Maps API styled map - colors problem

Question

I can't properly set color of water with google maps api v3.

My RGB color is: #676a59. I've converted it to HSL using this tool: http://www.workwithcolor.com/hsl-color-picker-01.htm. The result is: color: hsl(71, 9%, 38%);

This is the code I use in Javascript to style water.

stylers: [{hue: "#676a59"}, {lightness: 38}, {saturation: 9},  {visibility: "on" }, {gamma: 1.0}]

The problem is that it doesn't work at all. I don't really know what is the reason of that. Can you see something that I'm doing wrong?

Thanks

score 1 · Answer 1 · answered Oct 23 '13 at 12:15

I struggled with this for a long time, and tried two different Google Maps colour pickers without success.

However, the second one I tried alerted me to another way of specifying the colour: Rather than struggling with Google's take on HSL, you can just use the color property:

For example:

var mapStyles = [
  {
    featureType: "water",
    stylers: [
      { color: '#b6c5dd' }
    ]
  }
];

score 1 · Accepted Answer · answered May 18 '11 at 05:52

When Google Maps API did not quite match the color I selected for a styled map, I I pulled up the map in a browser, took a screenshot of just the area with the two shades that weren't quite matching, opened that screenshot up in an image editor (pixlr.com, in my case), used the color-sucker tool to get the saturation and lightness for the shade that wasn't quite right, adjusted my saturation and/or lightness in my Google Maps APi call by 1 to get it closer to the saturation and/or lightness of the color I wanted, and repeated until I got something that matched. It was tedious--I ended up taking about a half dozen snapshots before it was perfect--but it worked.

score 0 · Answer 3 · answered Feb 16 '11 at 09:39

0

I did it like this and it is working.Take a look

var stylez = [{
            featureType: "water",
            elementType: "all",
            stylers: [{
                hue: "#006b33"
            },
            {
                lightness: -70
            },
            {
                saturation:100
            }]
        }];

    //Map options
    var mapOptions = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'yourName']}
    };

    //Make a new map
    map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);

    var styledMapOptions = {
        name: "yourName"
    }

    var yourNameMapType = new google.maps.StyledMapType(
        stylez, styledMapOptions);

    map.mapTypes.set('yourName', yourNameMapType);
    map.setMapTypeId('yourName');

answered Feb 16 '11 at 09:39

Argiropoulos Stavros

9,436
11
61
79

Hi, thanks for your response. The color isn't quite correct though :( I've found this solution: http://stackoverflow.com/questions/3472040/rgb-value-to-hsl-converter but it's not fully correct too. BTW. Why did you use ("#006b33",-70,100)? – Jacek Francuz Feb 16 '11 at 10:01
I just put a color of my own there.It is not your color.But if the code is working then you can find the right color with this tool you mentioned in your question? – Argiropoulos Stavros Feb 16 '11 at 10:40
:) The problem is a bit different. This code displays color but doesn't work well. The color is incorrect. What I provide as input is what I've got from that tool. And this is very odd :S – Jacek Francuz Feb 16 '11 at 10:42

Google Maps API styled map - colors problem

3 Answers3