Removing a subset of polygons from an array of polygons

Question

I plot polygons on a google map in groups. Each group has a unique color, passed into the html/JavaScript.

called from from Delphi

function MarkArea(Lat, Lng, otherColor) {
    var latLng = new google.maps.LatLng(Lat,Lng);
    drawUserGrids(latLng, otherColor);
}

function called in js

    function drawUserGrids(point, otherColor) {
    // Square limits
 //  these are QtrMinutes stored in the database and drawn
        var bottomLeftLat = (Math.floor(point.lat() / llOffset) * llOffset);
        var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset);

        var gridLineSquare = [
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong),  //lwr left
            new google.maps.LatLng(bottomLeftLat, (bottomLeftLong + llOffset)),  //lwr right
            new google.maps.LatLng((bottomLeftLat + llOffset), (bottomLeftLong + llOffset)),  //upr right
            new google.maps.LatLng((bottomLeftLat + llOffset), bottomLeftLong)];  //upr left


        drawGridBox = true;

        if (drawGridBox == true) {
            gridUserArea = new google.maps.Polygon({
                path: gridLineSquare,
                draggable:false,
                geodesic:true,
                editable :false,
                fillColor:  otherColor,   << unique
                fillOpacity: 0.35,
                strokeColor: "#CC0099",
                strokeOpacity: 0.1,
                strokeWeight: 1
            });

            gridUserArea.setMap(map);
            userGridArray.push(gridUserArea);
        }
    }

function to UnMap a group by its fill color

function deListOneColor(otherColor){
    if (userGridArray) {
        for (var i in userGridArray) {
          if (userGridArray[i].gridUserArea.fillColor == otherColor)
            userGridArray[i].setMap(null);
        }
    }
}

My goal is to offer the user a way to unMap a particular area based on its color.

JS is throwing me an error: Unable to get property 'fillColor' of undefined or null reference.

Am I accessing the polygon correctly?

Answer 1

MVCE

There is no userGridArea property of a google.maps.Polygon (you can create on if you want, but no need). This works for me:

function deListOneColor(otherColor) {
  if (userGridArray) {
    for (var i in userGridArray) {
      if (userGridArray[i].get("fillColor") == otherColor)
        userGridArray[i].setMap(null);
    }
  }
}

proof of concept fiddle

code snippet:

var map;
var userGridArray = [];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  drawUserGrids(map.getCenter(), "#FF0000");
  drawUserGrids(new google.maps.LatLng(37.639097, -120.996878), "#0000FF");
  google.maps.event.addDomListener(document.getElementById('deletebtn'), 'click', function() {
    deListOneColor(document.getElementById('color').value);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

var llOffset = 0.25;

function drawUserGrids(point, otherColor) {
  // Square limits
  //  these are QtrMinutes stored in the database and drawn
  var bottomLeftLat = (Math.floor(point.lat() / llOffset) * llOffset);
  var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset);

  var gridLineSquare = [
    new google.maps.LatLng(bottomLeftLat, bottomLeftLong), //lwr left
    new google.maps.LatLng(bottomLeftLat, (bottomLeftLong + llOffset)), //lwr right
    new google.maps.LatLng((bottomLeftLat + llOffset), (bottomLeftLong + llOffset)), //upr right
    new google.maps.LatLng((bottomLeftLat + llOffset), bottomLeftLong)
  ]; //upr left


  drawGridBox = true;

  if (drawGridBox == true) {
    gridUserArea = new google.maps.Polygon({
      path: gridLineSquare,
      draggable: false,
      geodesic: true,
      editable: false,
      fillColor: otherColor,
      fillOpacity: 0.35,
      strokeColor: "#CC0099",
      strokeOpacity: 0.1,
      strokeWeight: 1
    });

    gridUserArea.setMap(map);
    userGridArray.push(gridUserArea);
  }
}

function deListOneColor(otherColor) {
  if (userGridArray) {
    for (var i in userGridArray) {
      if (userGridArray[i].get("fillColor") == otherColor)
        userGridArray[i].setMap(null);
    }
  }
}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="delete" id="deletebtn" />
<input value="#FF0000" id="color" />
<div id="map_canvas"></div>