I've a google map with some markers, but when I zoom in and out the marker icon size changes, is there any way to make that size fixed?
const [markers,setMarkers] = useState([])
function generaMarker(elementolo,index){
var mark = <Marker draggable={modify===true?true:false} onDragEnd={(e)=>modify===true?handleSpostamentoMarker(e,index):null} onClick={(e)=>eliminate===true?deleteMarker(e,index):handleClickEl(elementolo)} label={elementolo.Nome} title={elementolo.Nome} icon={{url:getIcon(elementolo),s : new window.google.maps.Size(50,50),labelOrigin: new window.google.maps.Point(25,60)
}} position={new window.google.maps.LatLng(elementolo.Posizione.Lat,elementolo.Posizione.Lng)}/>
var nonDarmele = markers;
nonDarmele.push(mark);
setMarkers(nonDarmele)
return mark;
}
I use this function to render the markers and memorize them in the arrsy
if I write setMarkers((prev)=>[...prev,mark]) it crashes for the re renders even if the markers array is not rendered
I've tried also using a listener to the map zoom changes for setting new Marker icon sizes but I get that setIcon() method doesen't exists
function handleMarkerSize(map){
var zoom = map.getZoom()
var markerWidth = (zoom/9)*20;
var markerHeight = (zoom/9)*34;
//scaledSize: new window.google.maps.Size(50,50)
markers.forEach((mark)=>{
console.log("ooo",mark)
mark.props.icon = {
url: mark.props.icon.url,
scaledSize: new window.google.maps.Size(markerWidth,markerHeight),
labelOrigin: new window.google.maps.Point(25,60)
}
})
}
I'm using @react-google-maps/api The map and markers visualization works fine, after rendering all the Markers there is no re render (only if in the function generaMarker() I use setMarkers with prev, and that make it crash)
Thanks for your help