3

For my React app, I'm implementing Google Maps. I'm using react-google-maps library for maps. I want to rotate my customize marker icon.

I have an SVG file (which has multiple paths and polygon) but Google Maps required in string type only (I think they will create SVG after giving path to icon) the same problem as link.

I followed same ans but I'm implementing in React so I'm unable to convert that code in React.

Working code in JS

var measle = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    optimized: false,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    }
  })

var rotationAngle = 10;
  google.maps.event.addListenerOnce(map, 'idle', function() {
    setInterval(function() {
    console.log("transform: rotate(" + rotationAngle + 'deg)');  $('img[src="http://www.geocodezip.com/mapIcons/SO_20170925_multiplePaths_mod.svg"]').css({
        'transform': 'rotate(' + rotationAngle + 'deg)',
        'transform-origin': '39px 60px'
      });
      rotationAngle += 10;
      rotationAngle %= 360;
    }, 1000);
  });
}

My code in React (in React Google Maps)

componentWillUpdate(){
      var rotationAngle = 10;
      if(this.props.refs.map){
        setInterval(() => {
                let img = React.createElement("img", {
                src: "../../../public/images/amb.svg",
                style: {transform: "rotate(" + rotationAngle + "deg)", transformOrigin: "39px 60px"},
                ref: image => {
                  // this.handleSize(image);
                }
              });
              rotationAngle += 10;
              rotationAngle %= 360;
            }, 1000);
     
      }
    }
    
    ---------------------------------------------
    <GoogleMap
        defaultCenter={props.MapCenter}
        defaultZoom={15}
        ref={props.onMapMounted}
        onCenterChanged={props.onCenterChanged}
        defaultOptions={{streetViewControl: false,mapTypeControl: false,
        styles:[
      {
        "featureType": "poi.business",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.park",
        "elementType": "labels.text",
        }}
      >
      {(BStatus !== 'picked' || BStatus !== 'dropped' || BStatus !== 'completed') && props.directions  && <DirectionsRenderer directions={props.directions} options={{suppressMarkers: true}} />}
        {props.pickupLocation && 
           <Marker 
           position={props.pickupLocation}
           visible={props.isShowPickMarker ? true : false}
           icon={require('../../../public/images/pick.png')}
         >
         </Marker>
         }  
         {props.dropoffLocation && <Marker
           position={props.dropoffLocation}
           visible={props.isShowDropMarker ? true : false} 
           icon={require('../../../public/images/drop.png')}
         >
            </Marker>
           }
        { props.waypoints && <Marker
            position={props.waypoints}
            visible={props.isShowDropMarker ? true : false} 
            icon = {{
                  url: require('../../../public/images/amb.svg'),
                }}
            >
            </Marker>
           }
      </GoogleMap>

My problem is I'm unable to set rotationAngle value to map icon. please help me out, I have been stuck for a long time.

Ahmet Emre Kilinc
  • 5,489
  • 12
  • 30
  • 42
zulqarnain
  • 1,536
  • 4
  • 26
  • 44

1 Answers1

0

You can achieve the same with document WEB API.

document.querySelector('[src*="../../../public/images/amb.svg"]').style.transform = 'rotate(' + rotationAngle + 'deg)';
document.querySelector('[src*="../../../public/images/amb.svg"]').style.transition = 'transform 1s linear';

Please make sure your src is correct. Further you don't need to add 100Kbs in your app size by adding Jquery. You can skip it by this approach.

Sakhi Mansoor
  • 7,832
  • 5
  • 22
  • 37
  • This works, but when you try to update the icon rotation after some time, the icon becomes aligned in the default position and then rotates. For example: if the initial position is 45deg and the new position is 90deg, the icon will become 0deg for about a second and then 90deg. Which looks glitchy. Any solution for this? P.S this only happens over the Gmaps marker, and not when the icon/image is outside scope of Gmap. i.e in the DOM. – Saurabh May 05 '21 at 09:49