this:
to this:
Is there an API setting to achieve this?
Setting any style will turn the logo to white.
That is apparently a design feature from Google to have a more neutral logo aspect (probably in case you change the map colors, it won't "conflict" with your color scheme).
I am not aware of any documented way to specifically set the logo color, but according to this issue (read the 2 comments from the Google assignee) you will get a white logo if you set styles, even to default.
Apparently, just passing an empty styles array works:
var style = [{
"stylers": [{
}]
}];
I'm really unsure why, but adding this to the map's styles (and passed through defaultOptions) seems to make the logo white:
styles: [
{
featureType: 'poi',
elementType: 'labels.icon',
stylers: [
{
visibility: 'off'
}
]
}
]
I've created a custom mapstyle in https://mapstyle.withgoogle.com/, and tried to apply a border between the states, but the default border style is doted. I was wondering if is possible to change to a line border.
See the picture below:
Can someone give me some tips on how to achieve that? or how to achieve the same purpose in another way? Thanks in advance!
According to the docs on stylers there is no option to change the stroke type to a solid line unfortunately.
{
"featureType": "administrative.province",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#ff3c3c" //no option avilable for stroke type
}
]
}
How can styles be applied to the Polymer 1 google-map tag?
The documentation suggests that an object of styles can be passed in via a 'styles' property on the tag.
However, when using something like this which previously worked without issue, the style is not being loaded in.
I've tried replacing the code from snazzymaps with an object (as opposed to an array), but that doesn't work.
It should work. Are you sure you are passing your styles object in correctly?
This gives you a styled map:
<google-map latitude="37.779" longitude="-122.3892"
min-zoom="9" max-zoom="11" language="en"
styles='[{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}]'>
</google-map>
Are you using single quotes for the styles property? I.e. styles='' rather than styles=""
That's what worked for me.
I could not find any answers on how to pass this object inside the value of the style tag, but I was able to apply the styles by reading the comments in the file" google-map.html":
<script>
var map = document.querySelector('google-map');
map.styles = [
{
stylers: [
{saturation: -100}
]
},
{
featureType: 'water',
stylers: [
{color: '#1d5068'}
]
}
];
Expanding on my previous comment / answer to Dian Carlos, here is code I finally used
Assuming that styledMapDef holds the map styles definitions object
var styledMapType = new google.maps.StyledMapType(styledMapDef, {name: 'Styled'});
this.map.setOptions( {"mapTypeControl":"true","mapTypeControlOptions":{"position":"3", "mapTypeIds": ["roadmap", "satellite", "hybrid", "terrain", "styled"]}, "scaleControl": "true"} );
this.map.mapTypes.set('styled', styledMapType);
this.map.setMapTypeId('styled');
I prepared a jfiddle with only country borders in order to help you and all styles resetted:
var styles = [
{
"stylers": [
{ "visibility": "off" }
]
}
];
http://jsfiddle.net/zsuan1c3/
I'd like to change colour of both country borders and coast lines!
Thanks!
Edit – august 2021
Google Maps API V3 currently accepts administrative.country directive for styling country borders.
{
"featureType": "administrative.country",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#ff0000"
}
]
}
Directive for coastlines is unfortunately not supported.
Original answer
There is an issue with the API:
Issue 7165: Bug: Cannot hide country borders anymore (since 9/24/14)
administrative.country.geometry elements seem to accept no styling at all.
related question: Google Maps: Hide country borders
In case someone is still stumbling on this thread as I did and looking for ways to customize Google Maps look and feel, here is the Google Devs explanation on how to do so
https://developers.google.com/maps/documentation/javascript/style-reference
Also, here is a great web app to customize the map and see the results in live.
https://mapstyle.withgoogle.com/
On google maps, Airports usually has two colors:
Lighter color representing whole airport terrain
Darker color representing runway
While trying to style map, I found out that there is no way (as far as I know), to style both of them separately. There is only one constant for airport in official API Refference, called transit.station.airport.
Is there any way to style airport runway in separation of whole airport terrain?
http://jsfiddle.net/rqvpQ/2/
Basically, you need to invert lightness and then play with color adjustments from there. I used the styled map wizard:
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
to play around with it and I don't guarantee color matching or anything here, but this is pretty close to inverted colors:
var style = [
{
"featureType": "transit.station.airport",
"elementType": "geometry.fill",
"stylers": [
{
"invert_lightness": true
},
{
"gamma": 9
},
{
"hue": "#ff7700"
}
]
}
];
http://jsfiddle.net/N9xpu/