can't define style on google maps Polygon

Question

I'm trying to add some polygons on data layer. I have defined the colors that they should have. My problem is that I can't set a color for each but if I set the style it becomes like a global style.

My JS FIDDLE

I tried like , with an random color:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -34.872, lng: 155.252},
  });

  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];
  var innerCoords3 = [
    {lat: -33.979, lng: 157.987},
    {lat: -34.979, lng: 157.987},
    {lat: -34.979, lng: 158.987},
    {lat: -33.979, lng: 158.987}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([innerCoords1,
                                                        innerCoords2,
                                                        innerCoords3])});
       map.data.setStyle(function(feature) {return {fillColor: getRandomColor(),strokeWeight: 5}})                                                                                              
}

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

how can I define style(fill color) for each rectangle to be different and unique, can someone help me please?

Answer 1

Your getRandomColor function isn't giving you different colors because it is only called once. If I assign each Polygon an id and index into an array based on that, I get different colors (I assume you don't really need random colors).

var colorArray = ["#FF0000", "#00FF00", "#0000FF"];
map.data.setStyle(function(feature) {
  var color = colorArray[feature.getId()];
  return {
    fillColor: color,
    strokeWeight: 5
  }
});

It does work for me if I call it the same as above (outside of the returned style):

map.data.setStyle(function(feature) {
  var color = getRandomColor();
  return {
    fillColor: color,
    strokeWeight: 5
  }
});

proof of concept fiddle

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: -34.872,
      lng: 155.252
    },
  });

  var innerCoords1 = [{
    lat: -33.364,
    lng: 154.207
  }, {
    lat: -34.364,
    lng: 154.207
  }, {
    lat: -34.364,
    lng: 155.207
  }, {
    lat: -33.364,
    lng: 155.207
  }];

  var innerCoords2 = [{
    lat: -33.364,
    lng: 156.207
  }, {
    lat: -34.364,
    lng: 156.207
  }, {
    lat: -34.364,
    lng: 157.207
  }, {
    lat: -33.364,
    lng: 157.207
  }];
  var innerCoords3 = [{
    lat: -33.979,
    lng: 157.987
  }, {
    lat: -34.979,
    lng: 157.987
  }, {
    lat: -34.979,
    lng: 158.987
  }, {
    lat: -33.979,
    lng: 158.987
  }];

  map.data.add({
    id: 0,
    geometry: new google.maps.Data.Polygon([innerCoords1])
  });
  map.data.add({
    id: 1,
    geometry: new google.maps.Data.Polygon([innerCoords2])
  });
  map.data.add({
    id: 2,
    geometry: new google.maps.Data.Polygon([innerCoords3])
  });
  var colorArray = ["#FF0000", "#00FF00", "#0000FF"];
  map.data.setStyle(function(feature) {
    var color = colorArray[feature.getId()];
    return {
      fillColor: color,
      strokeWeight: 5
    }
  });
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  console.log(color);
  return color;
}
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>