Polymer style google-map

Question

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.

Answer 1

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>