By running this code , I am getting the following console error in Chrome and IE not showing any console error.. It works fine for firefox.
**Console Error Message in Chrome Only**
//Image from origin 'file://' has been blocked from
// loading by Cross-Origin Resource Sharing policy:
// Invalid response. Origin 'null' is therefore not allowed access.
Please provide any guidance, any missing attribute to work on chrome
<!--https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>simple markers Example in gMaps</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
#map_canvas {
border:1px solid black;
height: 400px;
width: 100%;
border-radius: 4px;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
</body>
<script>
var RotateIcon = function(options){
this.options = options || {};
this.rImg = new Image();
this.rImg.setAttribute('crossOrigin', 'anonymous');
this.rImg.crossOrigin = 'Anonymous';
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');
};
var map
, markers = []
, center = new google.maps.LatLng(45.4214, -75.6919)
function init() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 8,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var i = 0; i < 50; i++) {
markers[i] = new google.maps.Marker({
position: {lat:center.lat() + Math.random() - 1.0, lng:center.lng() + Math.random() - 0.9},
map: map,
html: 'jsdlkf',label: {
text: "X",
fontWeight: "bold"
}
});
}
var firstTime = false;
setTimeout(function() {
for (var i = 0; i < 50; i++) {
var degree = parseInt(i % 2) === 0 ? 45 : parseInt(i % 3) === 0 ? 90 : 180;
markers[i].setOptions({
icon: RotateIcon.makeIcon("driverTethered.png")
.setRotation({deg: degree})
.getUrl()
})
}
}, 100);
}
init();
</script>
</html>
