How to properly use complex SVG image paths in Goo

I've created a little Google Maps page which displays the direction of a (for now) pre-defined point.

This can be found here

In this example I'm using a default arrow icon from the Google Maps API:

icon: {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    scale: 6,
    rotation: heading
}

However, I have my own custom SVG image (exported from Illustrator CS6) which I want to use in stead of the arrow.

At first I thought I could just put the url to the svg image, with some size attributes like this:

icon: {
     url: 'img/test_dev.svg',
     size: new google.maps.Size(128, 128),
     origin: new google.maps.Point(0, 0),
     anchor: new google.maps.Point(32, 32),
     rotation: direction
}

This shows the SVG image, but does not apply the rotation.

I have read that it is not possible to apply a rotation to a custom marker/image and I have to make use of the SVG Path notation. So I looked up the SVG Path of the image, which is like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="128px" height="128px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<g id="Laag_1">
    <g>
        <defs>

                <rect id="SVGID_1_" x="-0.001" y="0" transform="matrix(0.7009 0.7133 -0.7133 0.7009 389.2615 -86.391)" width="595.282" height="841.888"/>
        </defs>
        <clipPath id="SVGID_2_">
            <use xlink:href="#SVGID_1_"  overflow="visible"/>
        </clipPath>
        <path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M227.617,349.919c39.082-38.405,101.896-37.858,140.301,1.223
            c38.406,39.081,37.857,101.897-1.224,140.303c-39.081,38.404-101.896,37.855-140.302-1.227
            C187.987,451.139,188.536,388.325,227.617,349.919"/>
        <circle clip-path="url(#SVGID_2_)" fill="none" stroke="#1C1C1B" stroke-width="4" cx="297.156" cy="420.682" r="100.212"/>
        <path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M237.552,359.871c33.5-32.92,87.343-32.451,120.261,1.047
            c32.918,33.498,32.449,87.342-1.051,120.26c-33.497,32.92-87.341,32.449-120.259-1.049
            C203.583,446.631,204.054,392.788,237.552,359.871"/>
        <circle clip-path="url(#SVGID_2_)" fill="none" stroke="#1C1C1B" cx="297.157" cy="420.524" r="85.039"/>
    </g>

        <text transform="matrix(-0.7032 -0.7156 0.7133 -0.7009 236.9141 485.209)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">O</text>

        <text transform="matrix(-0.9668 -0.2681 0.2672 -0.9636 276.4443 506.4121)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">P</text>

        <text transform="matrix(-0.9714 0.2512 -0.2504 -0.9682 322.5098 505.2148)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">A</text>

        <text transform="matrix(-0.7156 0.7032 -0.7009 -0.7133 360.9883 481.7617)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">L</text>

        <text transform="matrix(-0.2681 0.9668 -0.9636 -0.2672 383.0596 441.335)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">B</text>

        <text transform="matrix(0.2512 0.9714 -0.9682 0.2504 382.3613 397.3232)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">I</text>

        <text transform="matrix(0.7989 0.8129 -0.7133 0.7009 357.1797 355.6123)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">Q</text>

        <text transform="matrix(0.7156 -0.7032 0.7009 0.7133 233.3838 359.5435)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">T</text>

        <text transform="matrix(0.2681 -0.9668 0.9636 0.2672 211.2422 400.4873)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">N</text>

        <text transform="matrix(-0.2512 -0.9714 0.9682 -0.2504 212.1113 443.8857)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">I</text>
    <g>
        <defs>

                <rect id="SVGID_3_" x="-0.001" y="0" transform="matrix(0.7009 0.7133 -0.7133 0.7009 389.2615 -86.391)" width="595.282" height="841.888"/>
        </defs>
        <clipPath id="SVGID_4_">
            <use xlink:href="#SVGID_3_"  overflow="visible"/>
        </clipPath>
        <path clip-path="url(#SVGID_4_)" fill="#BB1321" d="M266.426,392.657c-2.859,10.679-1.167,21.098,0.142,30.658l4.325,4.848
            c0.036-0.186,0.07-0.373,0.1-0.564c-2.489-9.499,0.299-20.021,8.127-27.008c5.231-4.667,11.773-6.929,18.271-6.856
            c6.498,0.042,13,2.415,18.149,7.175c7.704,7.123,10.31,17.694,7.653,27.145c0.028,0.191,0.059,0.379,0.091,0.564l4.408-4.77
            c1.47-9.491,3.36-19.828,0.714-30.503c-5.564-22.452-20.931-46.321-30.431-66.398l-0.001-0.001
            C288.145,346.81,272.397,370.346,266.426,392.657"/>
        <path clip-path="url(#SVGID_4_)" fill="none" stroke="#000000" stroke-width="0.25" d="M266.426,392.657
            c-2.859,10.679-1.167,21.098,0.142,30.658l4.325,4.848c0.036-0.186,0.07-0.373,0.1-0.564c-2.489-9.499,0.299-20.021,8.127-27.008
            c5.231-4.667,11.773-6.929,18.271-6.856c6.498,0.042,13,2.415,18.149,7.175c7.704,7.123,10.31,17.694,7.653,27.145
            c0.028,0.191,0.059,0.379,0.091,0.564l4.408-4.77c1.47-9.491,3.36-19.828,0.714-30.503c-5.564-22.452-20.931-46.321-30.431-66.398
            l-0.001-0.001C288.145,346.81,272.397,370.346,266.426,392.657z"/>
    </g>
</g>
<g id="Layer_2">
</g>
</svg>

This seems very complex, comparing to the path examples that are present on the Google Maps API documentation site.

What do I need to do to display my custom svg image with the calculation rotation applied?

EDIT:

I created 2 SVG's. The circle is now a SVG file, for the arrow I use the SVG Path notation with the appropriate attributes (color, stroke etc.). However, the arrow is not in the middle of the circle. The fiddle is here: jsfiddle.net/pwadme2y

Symbol/icon paths have to be a single SVG path definition. with a fill colour and a stroke (line) colour. Your symbol has multiple paths, plus text and other things like clip paths.

Luckily the clip paths that AI adds, can generally be ignored. Plus the text in your symbol is so tiny that it is not really visible and could be removed.

The remaining paths (the arrow and the two circles) will need to be merged into a single path. You can do this in Illustrator. Once you have done that, you can copy the path definition from your SVG file into your maps marker definition.

However, if you merge all the paths into one, you will be stuck with a single colour marker. If you need to keep the design with more than one colour, then you will need to make two markers (one for the arrow, and one for the circles), then superimpose them on the map.

Another option is to just keep the SVG as it is and use absolute positioning to position the SVG at the right place on the map. However you will need to be responsible for moving and rotating it when the map scrolls or zooms.