I'm working with Google Map Javascript API and I'm trying to create a custom Marker with a custom Icon which works with rotation,
var marker = new google.maps.Marker({
position: latlng,
map: this.map
});
marker.setIcon({
url:"assets/icon/nav.png",
//path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 1,
rotation: heading,
scaledSize: new google.maps.Size(35, 35),
});
The rotation attribute is working with google.maps.SymbolPath.XXXX as the line commented in the code but not with a custom Icon Image like I wrote in my code,
So I'm asking is there any solution to make custom icon image rotate ? Or to create a google.maps.SymbolPath from an image ?
1) No, as the Icon object doesn't have a rotation
property, and
2) yes, you can, but for this, you need to use a Symbol object and theSVG path notation . You can check this answer and this example for more info.
var symbol = {
path: "M0 0 H 90 V 90 H 0 L 0 0",
fillColor: '#FF0000',
fillOpacity: .5,
anchor: new google.maps.Point(0, 0),
strokeWeight: 0,
scale: .5,
rotation: 45
}
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
map: map,
icon: symbol
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.