Google Maps API styled map - colors problem
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
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.
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' }
]
}
];
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');
精彩评论