Question

I’m trying to implement class for handling Multipolygon (derived from OpenGIS Multipolygon specification). My primary goal was extend MVCObject and internally manage an array of google.maps.Polygon. But when I’m trying to bind my Multipolygon’s properties (with .bindTo method) to underlying Polygons in the loop, it seems that only the last polygon finally binded .

google.maps.MultiPolygon.prototype = new google.maps.MVCObject();
...
for (var n = 0; n < this.polygons.length; n++)
{
  for (var i in MultiPolygonOptions) this.bindTo(i, this.polygons[n], i);
}
...

Is it possible to bind MVCObject’s property to multiple targets in google maps v3? If no, maybe there are some workarounds? Thanks.

Answer 1

As I considered, after some illegal digging of gmaps puzzly source code, it became clear – it is not possible to add multiple targets when binding some key using MVCObject.bindTo.

---

But I’ve discovered some workaround. I’ve put targets (polygons) I wanted to bind into MVCArray, then binded array to property using someObject.bindTo(your_key, MVCArray_with_targets). Then I’ve attached arrays change function to listen and to pass changed properties to array elements. Surely, this works only one way, but it is sufficient in my case.

google.maps.MultiPolygon = function(options)
{
  var self = this;

  ...

  var gpolys = new google.maps.MVCArray();
  // creating polygons from paths
  polysOptions.forEach(function(value, number)
  {
    gpolys.push(self.__createPolygon(value));
  });

  // bind all parent properties to array and set it before (or this turns parent keys undefined)
  for (var i in MultiPolygonOptions) { gpolys.set(i, this.get(i)); this.bindTo(i, gpolys); }
  // pass changes to array members which is google.maps.Polygon instances
  gpolys.changed = function(prop)
  {
    this.forEach(function(poly)
    {
      poly.set(prop, self.get(prop));
    });
  }

  this.set('polys', gpolys);
}

google.maps.MultiPolygon.prototype = new google.maps.MVCObject();

Now, I can control appearance of all child polygons in my MultiPolygon in one place, just like with simple Polygon.

var mpoly = new google.maps.MultiPolygon({ options });
mpoly.setMap(map);
mpoly.setValues({
  fillOpacity: 0.5,
  fillColor: 'yellow'
});