Using Icon Fonts as Markers in Google Maps V3

Question

I was wondering whether it is possible to use icon font icons (e.g. Font Awesome) as markers in Google Maps V3 to replace the default marker. To show/insert them in a HTML or PHP document the code for the marker would be:

<i class="icon-map-marker"></i>

Answer 1

In a modern browser one can use the canvas in order to render the font to png, and then use the data URI scheme:

  function getIcon(glyph, color) {
    var canvas, ctx;
    canvas = document.createElement('canvas');
    canvas.width = canvas.height = 20;
    ctx = canvas.getContext('2d');
    if (color) {
      ctx.strokeStyle = color;
    }
    ctx.font = '20px FontAwesome';
    ctx.fillText(glyph, 0, 16);
    return canvas.toDataURL();
  }

For example: getIcon("\uf001") for the music note.