How can I create custom graphics on the fly to use on Google Maps v3 Markers?

Question

I'm making a Google Maps application that should support a high degree of customization of the displayed data. I want to allow the user to (among other things) pick between a wide assortment of shapes and colors for those shapes. Currently I have created PNGs of these shapes, each with 8 different color variations.

Not only is it a lot of work to add additional shapes, but the color setting is also severely limited. I would like to allow the user to tune a few settings and create a brand new icon with them. For this to be possible in pure JavaScript, the Google Maps markers must be able to display Canvas data, which according to a (relatively old) blog post I found, it doesn't.

Another option I can think of would be creating SVG images, but how do I apply the SVG to a Google Maps marker if I only have the SVG data in a JavaScript string?

Anyway, the summarize the question; How can I create custom graphics on the fly and use them for a Google Maps marker?

Answer 1

使用Canvas2Image将画布保存为图像，然后将其应用于Google地图。