1

I am trying to add a complex SVG on Google MAP as marker. Now if I use this code:

var icon = { 
    path:"calc.svg",
  }

 var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: icon
  });

my calc.svg doesn't add as marker on MAP. And if I change path to url in var icon option, I get my marker added on MAP but I cannot get functionality of rotation and resizing. So here are my options and their problems:

  1. Add custom SVGs to get rotation and resizing options. Problem is that I cannot use path of custom SVGs as they are too complex. See attached sample code of one SVG.
  2. Add custom SVGs as Image using url. Problem is that I don't get resizing and rotating options.

I hope I cleared my problem. Still if there are any ambiguities understanding my problem please let me know.

Code for Custom SVG:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="177.855px" height="199.746px" viewBox="0 0 177.855 199.746" enable-background="new 0 0 177.855 199.746"
     xml:space="preserve">
<g>
    <path fill="#A6A8AB" d="M39.425,110.927"/>
    <path fill="#A6A8AB" d="M61.889,139.35l-1.407,4.487l-1.433-0.448l-4.891,2.459L57.066,151l1.464,0.459l-1.479,4.721l-7.808-2.448
        l1.479-4.719l1.739,0.546l-1.912-3.199l-3.519,1.497l1.83,0.573l-1.478,4.719l-6.863-2.152l1.479-4.715l1.435,0.448l5.206-2.612
        l-2.856-4.886l-1.436-0.448l1.406-4.49l7.809,2.449l-1.407,4.487l-1.83-0.573l2.05,3.079l2.921-1.521l-1.677-0.525l1.405-4.488
        L61.889,139.35z"/>
</g>
<g>
    <path fill="#54B5C5" d="M59.316,154.072c-1.044,3.329-4.905,5.082-8.626,3.916l-27.922-8.751c-3.72-1.166-5.891-4.812-4.848-8.139
        l6.491-20.712c1.043-3.327,4.904-5.08,8.625-3.914l27.924,8.752c3.719,1.165,5.891,4.811,4.847,8.139L59.316,154.072z"/>
    <path fill="#FFFFFF" d="M52.35,131.345l-1.407,4.488l-1.433-0.449l-4.891,2.459l2.906,5.152l1.465,0.459l-1.479,4.719l-7.808-2.447
        l1.479-4.719l1.739,0.545l-1.912-3.198l-3.518,1.497l1.829,0.572l-1.478,4.72l-6.863-2.151l1.479-4.717l1.435,0.449l5.206-2.612
        l-2.856-4.886l-1.436-0.449l1.406-4.488l7.809,2.447l-1.406,4.488l-1.831-0.574l2.05,3.08l2.921-1.521l-1.677-0.524l1.405-4.488
        L52.35,131.345z"/>
    <path fill="#FFFFFF" d="M88.358,145.612l16.104,5.048l-1.18,3.771l-16.106-5.049L88.358,145.612z M86.007,153.115l16.104,5.049
        l-1.183,3.77l-16.104-5.046L86.007,153.115z"/>
</g>
</svg>
Aleem
  • 520
  • 1
  • 4
  • 15
  • You can try this. Path is a little complicated but it seems be the best option to rotate and resize. [link](http://stackoverflow.com/questions/24413766/how-to-use-svg-markers-in-google-maps-api-v3) – so_jin_ee Jan 06 '15 at 23:00
  • I am currently dealing with the same issue. Any progress made on this @Aleem? Is this possible? I hope I don't have to use png! – E.E.33 Mar 27 '15 at 19:04
  • 1
    @E.E.33 I had to use XML parser to extract all the tags from the custom svgs in a single String and use that string for **path** attribute. It helped me to to get complete layout of my SVG but I lost all the colors. So I had to use **fill** attribute to fill SVG with one color throughout. – Aleem Mar 29 '15 at 14:11
  • Interesting.. thanks, I'm working on a solution to layer each of the paths inside of my SVG onto the map as individual symbols to make what looks like one Icon. Its important that we keep the color variations as its a branding requirement. I'll post my solution if I find success. – E.E.33 Mar 29 '15 at 18:16

0 Answers0