Estoy usando gráficos de Google para mostrar marcadores en el mapa. Solo tiene círculos simples. Quiero usar imágenes y animaciones personalizadas si es posible.

 <Chart width={'100vw'} height={'100vh'} chartType='GeoChart' data={[ ['Lat', 'Long', 'Name'], [0, 0, 'test'], ]} options={{ region: 'US', displayMode: 'markers', colorAxis: { colors: ['green', 'blue'] }, resolution: 'provinces', defaultColor: '#555', backgroundColor: '#444', datalessRegionColor: '#f8bbd0', }} />

 circle::before { content: ''; background-image: url('../images/man.svg'); position: absolute; color: blue; width: 70px; display: inline-block; background-size: contain; background-repeat: no-repeat; right: 0; bottom: 0; }

Realmente no entiendo por qué no funciona. ¿Es esto algo que no se puede hacer con CSS?