JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=zh-TW"></script>
<script src="http://app.essoduke.org/tinyMap/jquery.tinyMap-2.9.8.min.js"></script>
<div id="map" class="map"></div>

CSS

.map{width:100%;height:300px}

JavaScript

function degreesToRadians(degrees) {
	return (degrees * Math.PI)/180;
}

function drawCanvas(angle1, angle2, angle3){
	var canvas = document.createElement('canvas');
	ctx = canvas.getContext('2d');
	ctx.lineWidth = 3;
    ctx.fillStyle = 'rgba(60,70,120,1)';
	var dAngle;
	ctx.beginPath();
	for(i =1 ; i<4 ; i++){
		if (i = 1) {
			dAngle = angle1;
        }
		if (i = 2) {
			dAngle = angle2;
        }
		if (i = 3) {
			dAngle = angle3;
        }
		if (dAngle < 91) {
			ctx.moveTo(20,20);
			ctx.lineTo(20 + Math.sin(degreesToRadians(dAngle)) * 20, 20 - Math.cos(degreesToRadians(dAngle)) * 20);
		}
		if (90 < dAngle && dAngle < 181) {
			ctx.moveTo(20, 20);
			ctx.lineTo(20 + Math.sin(degreesToRadians(180 - dAngle)) * 20, 20 + Math.cos(degreesToRadians(180 - dAngle)) *20);

		}
		if (180 < dAngle && dAngle < 271) {
			ctx.moveTo(20, 20);
			ctx.lineTo(20 - Math.cos(degreesToRadians(270-dAngle)) * 20, 20 + Math.sin(degreesToRadians(270 - dAngle)) * 20);
		}
		if (270 < dAngle && dAngle < 361) {
			ctx.moveTo(20, 20);
			ctx.lineTo(20 - Math.sin(degreesToRadians(360 - dAngle)) * 20, 20 - Math.cos(degreesToRadians(360 - dAngle)) * 20);
		}

		ctx.stroke();
        //$('<img />').attr('src', canvas.toDataURL()).appendTo('body');
		return canvas.toDataURL();
	}
};

var map = $('#map');

map.tinyMap({
    'center': ['25.041904178378704', '121.55848503112793'],
    'zoom': 14,
    'marker': [
        {
            'addr': ['25.034516521123315','121.56496524810791'],
            'icon': drawCanvas(10, 20, 30),
            'id': 'A'
        },
        {
            'addr': ['25.038521464229383', '121.55900001525879'],
            'icon': drawCanvas(30, 60, 90),
            'id': 'B'
        }
    ]
});