fullstackreact / google-maps-react

Companion code to the "How to Write a Google Maps React Component" Tutorial
https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/
MIT License
1.64k stars 818 forks source link

Dynamically updating marker icon svg fill color #35

Open hanserino opened 8 years ago

hanserino commented 8 years ago

Hi,

I'm injecting some svg code inline to the icon prop on the Marker component. When I click it I want to highlight the marker by changing the fill color on the 's inside the . In the browser I can see that the component's icon svg code is updating, but visually it stays the same. Any ideas why?

Here's some of the code: (and yes, i'm updating the state on click, so it re-renders the component).

<Marker
    onClick={this.onMarkerClick.bind(this, item)}
    icon={`data:image/svg+xml;utf-8, <svg width="50" height="50" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle fill="${fillVariable}" opacity="0.25" cx="50%" cy="50%" r="${radiusVariable}"/></svg>`}
/>
auser commented 7 years ago

Hm... Not sure. Is this still an issue?

Qwiso commented 6 years ago

@auser yes

click to place a marker, then click on marker should change it to blue

observe the console to see that the icon fillColor has been updated after clicking

https://codesandbox.io/s/l5vojmv7ol

daiky00 commented 5 years ago

Why is this still open @auser? :(

rakshit087 commented 2 years ago

Same issue with fillColor and strokeColor.