Unable to independently style markers

[dehuszar]

• Operating System version: Ubuntu 16.04
• Ember CLI version: 2.10.1
• Ember CLI G Maps version: v0.5.6

I'm trying to independently style markers, but they seem to all conform to the last change made. Here's my markers array:

turbineVector: {
    path: "[...]", // using inline svg path
    fillColor: '#FF0000',
    fillOpacity: 0.6,
    scale: 0.05,
    strokeColor: '#000000',
    strokeWeight: 2
},
mapMarkers: computed.map(
    'filteredTowers',
    function(tower) {
      const component = this;
      const turbineVector = this.turbineVector;
      const severity = get(tower, 'severity');
      if (severity !== ' ') {
        turbineVector.fillColor = this.severityColors[get(tower, 'severity')];
        turbineVector.strokeColor = this.severityColors[get(tower, 'severity')];
      }
      return {
        click: function(event, marker) {
          component.sendAction('transitionToTurbine', get(tower, 'location.id'), get(tower, 'id'));
        },
        icon: turbineVector,
        id: tower.get('id'),
        infoWindow: {
          content: `${tower.get('towerNumber')}`
        },
        lat: tower.get('latitude'),
        lng: tower.get('longitude'),
      };
    }
  )

As you can see I'm trying to update the fill and stroke of my marker vector as I iterate through each tower. This doesn't do what I was expecting though. Is this possible? I'm not sure whether this is a GoogleMaps limitation, or an issue with the addon. Do I need to create separate marker arrays for each marker variation?

Thanks in advance, Sam

[Matt-Jensen]

Without running this code personally I see you may have an issue with referencing here: turbineVector = this.turbineVector;

and:

turbineVector.fillColor = this.severityColors[get(tower, 'severity')];
turbineVector.strokeColor = this.severityColors[get(tower, 'severity')];

causing the source turbineVector object to be updated to the last value you set. If you instead do: const turbineVector = Ember.copy(this.turbineVector); does the bug persist?

[Matt-Jensen]

In addition to the above I would rewrite:

turbineVector: {
    path: "[...]", // using inline svg path
    fillColor: '#FF0000',
    fillOpacity: 0.6,
    scale: 0.05,
    strokeColor: '#000000',
    strokeWeight: 2
},
// ...

to something like:

turbineVector: Object.freeze({
    path: "[...]", // using inline svg path
    fillColor: '#FF0000',
    fillOpacity: 0.6,
    scale: 0.05,
    strokeColor: '#000000',
    strokeWeight: 2
}),
// ...

So it throws an error for any potential referencing bugs, assigning values to the source object.

[dehuszar]

Brilliant! Thank you. Both suggestions did the trick nicely.