Google Maps: Transparent Polygons

Question

I have a map that will contain a group of colored polygons. There are times I want to change the fill color of each poly from whatever it is to transparent. I have the following code:

polys[x].setOptions({
    fillColor: "#FFFFFF",
    fillOpacity: .01,  //This changes throughout the program      
    strokeColor: '#000000',
});

How can I set the fillColor to transparent? Is there a specific hex value?

Answer 1

The google.maps.PolygonOptions.fillColor is just that, a color, there is no "transparent" color, that is an Opacity value (0.0 is fully transparent, 1.0 if fully opaque).

fillColor   | string | The fill color. All CSS3 colors are supported except for extended named colors.
fillOpacity | number | The fill opacity between 0.0 and 1.0

Update: 0.0 seems to work now for transparent Polygons (jsfiddle)

if (window.attachEvent) {
  window.attachEvent('onload', initMap);
} else if (window.addEventListener) {
  window.addEventListener('load', initMap, false);
} else {
  document.addEventListener('load', initMap, false);
}

function initMap() {
  var latlng = new google.maps.LatLng(51.5001524, -0.1262362);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'Westminster, London, UK'
  });
  var boundCoords = [
    new google.maps.LatLng(51.3493528, -0.378358),
    new google.maps.LatLng(51.7040647, 0.1502295),
    new google.maps.LatLng(51.5001524, -0.1262362)
  ];
  var boundCoords2 = [
    new google.maps.LatLng(51.3493528, -0.378358),
    new google.maps.LatLng(51.7040647, 0.1502295),
    new google.maps.LatLng(51.6001524, -0.1262362)
  ];
  var poly = new google.maps.Polygon({
    paths: boundCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  poly.setMap(map);
  console.log(poly);
  var poly2 = new google.maps.Polygon({
    paths: boundCoords2,
    strokeColor: '#000000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.0
  });
  poly2.setMap(map);
  console.log(poly);

}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>