JSFiddle - React, Tailwind, and code Playground
HTML
<img id="test" src="/img/logo.png"/>
<div id="map"></div>
<script type="text/javascript">
var map;
var defer = $.Deferred();
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
defer.resolve(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap">
</script>
CSS
#test {
}
#map {
height: 700px;
width:100%;
}
JavaScript
var RotateIcon = function(options){
this.options = options || {};
this.rImg = options.img || new Image();
this.rImg.src = this.rImg.src || this.options.url || '/static/groups/img/car_map_state_go.png';
this.options.width = this.options.width || this.rImg.width || 52;
this.options.height = this.options.height || this.rImg.height || 60;
canvas = document.createElement("canvas");
canvas.width = this.options.width;
canvas.height = this.options.height;
this.context = canvas.getContext("2d");
this.canvas = canvas;
};
RotateIcon.makeIcon = function(url) {
return new RotateIcon({url: url});
};
RotateIcon.prototype.setRotation = function(options){
var canvas = this.context,
angle = options.deg ? options.deg * Math.PI / 180:
options.rad,
centerX = this.options.width/2,
centerY = this.options.height/2;
canvas.clearRect(0, 0, this.options.width, this.options.height);
canvas.save();
canvas.translate(centerX, centerY);
canvas.rotate(angle);
canvas.translate(-centerX, -centerY);
canvas.drawImage(this.rImg, 0, 0);
canvas.restore();
return this;
};
RotateIcon.prototype.getUrl = function(){
return this.canvas.toDataURL('image/png');
};
$(function(){
$('#test').one('load', function(){
(function(test) {
defer.then(function(map){
var marker = new google.maps.Marker({
position: {lat: -34.397, lng: 150.644},
map: map,
title: 'Hello World!'
});
var step = 1;
var angle = 1;
setInterval(function(){
test.attr('src', RotateIcon.makeIcon("/img/logo.png")
.setRotation({deg: angle+=step % 360})
.getUrl());
marker.setOptions({
icon: test.attr('src')
})
}, 100);
})
})($(this))
}).each(function(){
if (this.complete) {
...