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');
Related
I have a mixin
mixin icon(url)
svg()
use(xlink:href=url)
And the code to output
-
var features = [
{
icon: +icon(img/time.svg)
}
]
each item in features
+feature(item.icon)
What am I doing wrong?
Are you wanting something like this? I've fixed the indentation, mixin references, and stored the path to the icon as a string.
mixin icon(url)
svg
use(xlink:href=url)
-
var features = [
{
icon: 'img/time.svg'
}
]
each item in features
+icon(item.icon)
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 have a paper tooltip, working correctly. I'm trying to disable the fade-in / out animation, to resemble Polymer 0.5 behavior. THe animationconfig seems to be ignored. Any ideas ?
<paper-tooltip for="addid" position="left" animationConfig="{{tooltipAnimation}}">Tooltip text</paper-tooltip>
In the polymer code:
ready: function() {
this.tooltipAnimation =
{"entry": [{"name": "fade-in-animation", "timing": {"delay": 1000}}],
"exit": [{"name": "fade-out-animation"}]};
It should write as -
animation-config="{{tooltipAnimation}}"
Attribute names with dashes are converted to camelCase property names
by capitalizing the character following each dash, then removing the
dashes. For example, the attribute first-name maps to firstName.
Read Property name to attribute name mapping.
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;
}