I’m first changing the icon of a marker with .setIcon().
Then I’m rotating the icon with:
$('img[src="https://' + thedomain +
'/xplorit_common/assets/SVG/map_radar.svg"]').css({
'transform': 'rotate(' + adj_offset_bearing + 'deg)',
});
Everything works just fine with a small number of markers. But when I have upwards of 200+ markers the icon will not rotate. The marker image does change but the <img> src attribute does not change when viewing Elements in Dev Tools( even when searching for map_radar.svg ). Which, circling back, makes sense as to the icon not rotating; since the value is not actually addressable in the DOM. But does not make sense that the "correct" icon is visible
I’ve beaten this horse to death and need some outside input. Any ideas?
optimized:false optionIf you use specific markers with custom icons with .svg, you can experiment some difficulties with large number of markers. To bypass this problem, you need to disable the optimized rendering property set by default when you build a marker. To do it, just add line optimized:false when you set each of your markers:
var marker = new google.maps.Marker({
position: myLatlng,
map: myGmap,
icon: {url: mySvgIconUrl},
optimized: false
});
Or do it with the setOption() method :
marker.setOptions({'optimized':false});
For more infos about it you can look this section of the documentation