0

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

0 Answers0