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
}
]
}
Related
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 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/
Anyone know what featureType this icon is (at The Hive)?
If I remove all 'poi' types, it disappears. Using:
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
However if I individually remove all the sub-types listed here: https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleFeatureType
poi.attraction
poi.business
poi.government
poi.medical
poi.park
poi.place_of_worship
poi.school
poi.sports_complex
then it still appears. Are some POI elements on the map not of any of the sub-types, and just belong to the POI parent type?
In fact the answer is, yes,
"Note however that parent features may include some additional
features that are not included in one of their child feature types."
https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleFeatureType
I have a v3 google map and in the bottom-right corner of the map, there is a "Report a map error" link overlaid onto the map. Does anyone know if it is possible to remove this from the map?
Edit:
Here is an example of what I mean: http://jsfiddle.net/ahfA5/
You could style the map to get rid of this. Check this out.
Notice that if you compare the first two screenshots, the "Report a map error" link is present in the first, but not in the second.
The simplest way to apply a dummy style to the map so that it still looks like google maps but without the error link would be to do the following:
const styleOptions = {
name: `Dummy Style`,
}
const MAP_STYLE = [
{
featureType: `road`,
elementType: `all`,
stylers: [{ visibility: `on` }],
},
]
const mapType = new google.maps.StyledMapType(MAP_STYLE, styleOptions)
map.mapTypes.set(`Dummy Style`, mapType)
map.setMapTypeId(`Dummy Style`)
Here's the updated JSFiddle.
An issue with the custom style map is that when switching back from map/satellite or street view it does not return to the custom style instance.
// remove the wrapping container
.gm-style-cc:last-child {
display: none !important;
}
// remove the link only
a[title="Report errors in the road map or imagery to Google"] {
display: none !important;
}
There isn't a way to disable this feature properly via the API.
Keep in mind, if you hide it without using the API it will violate the Google Maps API Terms of Service which, as of the date of this post, doesn't allow developers to manipulate this link. Refer to 10.1.1.f.x:
delete, obscure, or in any manner alter any brand features, logos, warnings, notices... or links that appear in the Service or the Content;
The example presented here does works:
var styleOptions = {
name: "Dummy Style"
};
var MAP_STYLE = [
{
featureType: "road",
elementType: "all",
stylers: [
{ visibility: "on" }
]
}
];
var mapType = new google.maps.StyledMapType(MAP_STYLE, styleOptions);
map.mapTypes.set("Dummy Style", mapType);
map.setMapTypeId("Dummy Style");
Initially the map get displayed WITHOUT the link on the Default map!
BUT
upon selecting either:
the MAP/Terrain or the SATELLITE/Label from the menu the Report map error link RETURNS on the map refresh.
If you choose as an alternative to create a StyledMapType MAP.
The Report a map error link can be disabled permanently on the StyledMap.
But you now have two MAPS (Default and the StyledMap).
I couldn't find a way to hide the default map.
Bottom line I couldn't remove the link Report a map error from the Default map permanently.
You can not do this - Google's attempt at providing accurate data via crowd-sourcing will cause this on occasion. Live with it and accept that limitation. you can layer a custom element on top of the canvas if you position it absolute or fixed. But that kind of violates their TOS as it also covers the copyright notice.
You can hide it using CSS trick. It's dirty but working:
/* remove ugly google report-a-bug button from maps */
.gmnoprint:last-child {
display: none !important;
}