4

We are searching for a way to set the styles on google v3 map so that a given feature - such as water - is transparent (ie shows through to the background beneath the holding div)... ?

We have tried with setting the styling with something like this: 

var styles = [
      {
        featureType: "water",
        stylers: [
          { color: none }
        ]
      }]
map.setOptions({styles: styles});

but this simply sets the color to the map default which is light blue... when what we want is to see the background layer underneath the whole map...

thanks

user1051849
  • 2,307
  • 5
  • 26
  • 43
  • 1
    Cannot see it working, but transparency is easily achieved by using an rgba color 'color:rgba(0,0,255,.5)'. But if there is a blue layer behind that, then you need to get a hold of that area as well. – Rafe Mar 14 '13 at 11:14
  • thanks Rafe - can you set element styles with rgba? i can't seem to get it to work. – user1051849 Mar 14 '13 at 11:39
  • An rgba color only works for a flat colour. It sets the alpha transparency of a solid colour hence the letters. As I said, I cannot see how you can solve your issue, but was just offering an idea for you to play with. – Rafe Mar 14 '13 at 11:42
  • Ok - cool. I'll see where that takes me and get back to you if i can see a way through. – user1051849 Mar 14 '13 at 11:49

1 Answers1

1

Check out the Styled Maps Wizard (works best in chrome). You can play with all options. So maybe this is what you need:

  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "off" }
    ]
  }

Sadly it seems that opacity is not a supported styler.

FrVaBe
  • 47,963
  • 16
  • 124
  • 157
  • Hi FrVaBe - funny: i was just playing with that - but "off" sets the colour to an off white colour which is not transparent it seems sadly – user1051849 Mar 14 '13 at 11:55
  • @user1051849 It seems that opacity is not supported. – FrVaBe Mar 14 '13 at 12:04
  • You may be able to use the rgba colour idea with it though. If you can set the colour, it should be achievable. Didn't even think of this. – Rafe Mar 14 '13 at 12:10
  • hmm - i gave it a go but it seems it only takes hex colour codes: i can't seem to format it to take rgba. Can you guys make it work? seems like a perfect solution if so! – user1051849 Mar 14 '13 at 12:36
  • 1
    I tried to use a hex color with opacity (e.g. {color: '#0C0000FF'} as describe [here](http://stackoverflow.com/a/8254129/367285). It seems to have an effect (color will be brighter) but I can not see that opacity works. – FrVaBe Mar 14 '13 at 12:45
  • yeah - that would have been great - shame it doesn't quite work. neat trick i didn't know about though. – user1051849 Mar 14 '13 at 15:56
  • I also never touched rgba so far. Thanks to @Rafe for mentioning this possibility. But actually it seems not to be supported (documentation only mentions rgb color values). – FrVaBe Mar 14 '13 at 16:16
  • @FrVaBe was close! To set opacity to a hex color in your styles, _prepend_ the alpha as two-digit hex. E.g. 50% red would be: { color: '#80FF0000' }, with '80' meaning 50% alpha of 'FF0000' – Sean Aug 31 '21 at 18:45