CODEWITHSUNDEEP
google-mapspolymerpolymer-1.0
Lloyd Jones
Lloyd Jones

Reputation: 445

Polymer style google-map

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.

Upvotes: 3

Views: 468

Answers (4)

Fausto R.
Fausto R.

Reputation: 1334

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');

Upvotes: 0

Dian Carlos
Dian Carlos

Reputation: 21

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'}

        ]

    }

];

Upvotes: 0

Will Squire
Will Squire

Reputation: 6595

Are you using single quotes for the styles property? I.e. styles='' rather than styles=""

That's what worked for me.

Upvotes: 0

Aleksandar Totic
Aleksandar Totic

Reputation: 2597

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>

Upvotes: 4

Related Questions