Skip to content

Instantly share code, notes, and snippets.

@christophercliff

christophercliff/index.html

Created October 7, 2011 17:06
Show Gist options
  • Save christophercliff/1270807 to your computer and use it in GitHub Desktop.
Save christophercliff/1270807 to your computer and use it in GitHub Desktop.
Download ZIP
Generate Google Maps marker images on the client in a variety of colors
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function(){
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
for (var i = 2, l = 360; i < l; i = i + 10)
{
draw(ctx, i);
$('body')
//.append('<div>&lt;img src="' + canvas.toDataURL() + '" /&gt;</div>')
.append($('<img src="' + canvas.toDataURL() + '" />'))
;
ctx.clearRect ( 0 , 0 , 21 , 36 );
}
$(canvas)
.remove()
;
});
function draw(ctx, i) {
// marker/Path
ctx.save();
ctx.beginPath();
ctx.moveTo(20.0, 10.5);
ctx.bezierCurveTo(20.0, 15.1, 17.8, 16.0, 14.3, 22.1);
ctx.bezierCurveTo(10.8, 28.1, 10.7, 34.9, 10.7, 34.9);
ctx.lineTo(10.3, 34.9);
ctx.bezierCurveTo(10.3, 34.9, 10.1, 28.1, 6.7, 22.1);
ctx.bezierCurveTo(3.2, 16.0, 1.0, 15.1, 1.0, 10.5);
ctx.bezierCurveTo(1.0, 5.2, 5.2, 1.0, 10.5, 1.0);
ctx.bezierCurveTo(15.7, 1.0, 20.0, 5.2, 20.0, 10.5);
ctx.closePath();
ctx.fillStyle = 'hsl(' + i + ', 84%, 70%)';
ctx.fill();
ctx.strokeStyle = 'hsl(' + (i - 2) + ', 48%, 42%)';
ctx.stroke();
// marker/Path
ctx.beginPath();
ctx.moveTo(13.4, 11.0);
ctx.bezierCurveTo(13.4, 12.6, 12.1, 13.9, 10.5, 13.9);
ctx.bezierCurveTo(8.9, 13.9, 7.5, 12.6, 7.5, 11.0);
ctx.bezierCurveTo(7.5, 9.3, 8.9, 8.0, 10.5, 8.0);
ctx.bezierCurveTo(12.1, 8.0, 13.4, 9.3, 13.4, 11.0);
ctx.closePath();
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fill();
ctx.restore();
}
</script>
</head>
<body>
<canvas id="canvas" width="21" height="36"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment