How to use complex SVG image paths in Google Maps

Question

I created a small Google Maps page that displays the direction of a predefined point.

Here you can find

In this example, I use the 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 SVG image (exported from Illustrator CS6) that I want to use instead of the arrow.

At first I thought that I could just put the url in the svg image with 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 an SVG image but does not apply rotation.

I read that it is not possible to apply rotation to a custom marker / image, and I have to use SVG Path notation. So I looked at the SVG path of the image, which looks 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 complicated compared to the examples of paths that are present on the Google Maps API documentation site.

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

EDIT:

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

Answer 1

Character / icon paths should be the only SVG path definition. with fill color and dash (dash) color. Your symbol has several paths, plus text and other things, such as clip paths.

Fortunately, the clip paths that the AI ​​adds can usually be ignored. Plus, the text in your character is so tiny that it is not very noticeable and can be deleted.

The remaining paths (arrow and two circles) should be combined in one path. You can do this in Illustrator. Once you do this, you can copy the path definition from your SVG file to the map marker definition.

However, if you combine all the paths into one, you will be stuck with one color marker. If you need to save a design with more than one color, then you will need to make two markers (one for the arrow and one for the circles), and then lay them on the map.

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