How to use SVG markers in Google Maps API v3

Question

Can I use my converted image svg as google map icon  I was converting my png image to svg and I want to use this like google map symbol that can be rotated  I already tried to use the google map symbol but I want to have an icon like car  man  etc    That s why I converted my some png files to svg  just like this example site what does he use for these http   www goprotravelling com

User · Accepted Answer

You can render your icon using the SVG Path notation.

See Google documentation for more information.

Here is a basic example:

var icon = {

    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: '#FF0000',
    fillOpacity: .6,
    anchor: new google.maps.Point(0,0),
    strokeWeight: 0,
    scale: 1
}

var marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: icon
});

Here is a working example on how to display and scale a marker SVG icon:

JSFiddle demo

Edit:

Another example here with a complex icon:

JSFiddle demo

Edit 2:

And here is how you can have a SVG file as an icon:

JSFiddle demo

User · Answer

Yes you can use an  svg file for the icon just like you can  png or another image file format  Just set the url of the icon to the directory where the  svg file is located  For example   var icon             url   path to images car svg           size  new google maps Size sizeX  sizeY           origin  new google maps Point 0  0           anchor  new google maps Point sizeX 2  sizeY 2      var marker   new google maps Marker           position  event latLng          map  map          draggable  false          icon  icon

User · Answer

As mentioned by others in this thread  don t forget to explicitly set the width and height attributes in the svg like so    lt svg id  some id  data-name  some name  xmlns  http   www w3 org 2000 svg       viewBox  0 0 26 42       width  26px  height  42px  gt    if you don t do that no js manipulation can help you as gmaps will not have a frame of reference and always use a standard size    i know it has been mentioned in some comments  but they are easy to miss  This information helped me in various cases

User · Answer

Things are going better  right now you can use SVG files           marker   new google maps Marker               position   lat  36 720426  lng  -4 412573               map  map              draggable  true              icon   img tree svg

User · Answer

You need to pass optimized  false   E g   var img     url   img puff svg   scaledSide  new google maps Size 5  5     new google maps Marker  position  this mapOptions center  map  this map  icon  img  optimized  false       Without passing optimized  false  my svg appeared as a static image

User · Answer

I know this post is a bit old  but I have seen so much bad information on this at SO that I could scream  So I just gotta throw my two cents in with a whole different approach that I know works  as I use it reliably on many maps  Besides that  I believe the OP wanted the ability to rotate the arrow marker around the map point as well  which is different than rotating the icon around it s own x y axis which will change where the arrow marker points to on the map   First  remember we are playing with Google maps and SVG  so we must accomodate the way in which Google deploys it s implementation of SVG for markers  or actually symbols   Google sets its anchor for the SVG marker image at 0 0 which IS NOT the upper left corner of the SVG viewBox  In order to get around this  you must draw your SVG image a bit differently to give Google what it wants    yes the answer is in the way you actually create the SVG path in your SVG editor  Illustrator  Inkscape  etc       The first step  is to get rid of the viewBox  This can be done by setting the viewBox in your XML to 0    that s right  just one zero instead of the usual four arguments for the viewBox  This turns the view box off  and yes  this is semantically correct   You will probably notice the size of your image jump immeadiately when you do this  and that is because the svg no longer has a base  the viewBox  to scale the image  So we create that reference directly  by setting the width and height to the actual number of pixels you wish your image to be in the XML editor of your SVG editor   By setting the width and height of the svg image in the XML editor you create a baseline for scaling of the image  and this size becomes a value of 1 for the marker scale properties by default  You can see the advantage this has for dynamic scaling of the marker   Now that you have your image sized  move the image until the part of the image you wish to have as the anchor is over the 0 0 coordinates of the svg editor  Once you have done this copy the value of the d attribute of the svg path  You will notice about half of the numbers are negative  which is the result of aligning your anchor point for the 0 0 of the image instead of the viewBox   Using this technique will then let you rotate the marker correctly  around the lat and lng point on the map  This is the only reliable way to bind the point on the svg marker you want to the lat and long of the marker location   I tried to make a JSFiddle for this  but there is some bug in there implementation  one of the reasons I am not so fond of reinterpreted code  So instead  I have included a fully self-contained example below that you can try out  adapt  and use as a reference  This is the same code I tried at JSFiddle that failed  yet it sails through Firebug without a whimper        lt  DOCTYPE html gt       lt html gt       lt head gt       lt meta charset  utf-8    gt       lt meta name  viewport   content  width device-width  initial-scale 1    gt       lt meta name  author     content  Drew G  Stimson  Sr    Epiphany      gt       lt title gt Create Draggable and Rotatable SVG Marker lt  title gt       lt script src  http   maps googleapis com maps api js sensor false  gt   lt  script gt       lt style type  text css  gt         document body           margin 0          border  0          padding  10px          font-family  Arial sans-serif          font-size  14px          font-weight  bold          color   f0f9f9          text-align  center          text-shadow  1px 1px 1px  000          background  1f1f1f                 map canvas   rotation control           margin  1px          border 1px solid  000          background  444          -webkit-border-radius  4px             -moz-border-radius  4px                  border-radius  4px                 map canvas            width  100           height  360px                 rotation control            width  auto          padding 5px                 rotation value            margin  1px          border 1px solid  999          width  60px          padding 2px          font-weight  bold          color   00cc00          text-align  center          background  111          border-radius  4px           lt  style gt    lt script type  text javascript  gt    var map  arrow marker  arrow options    var map center    lat 41 0  lng -103 0     var arrow icon         path   M -1 1500216e-4 0 C 0 281648 0 0 547084 -0 13447 0 718801 -0 36481 l 17 093151 -22 89064 c 0 125766 -0 16746 0 188044 -0 36854 0 188044 -0 56899 0 -0 19797 -0 06107 -0 39532 -0 182601 -0 56215 -0 245484 -0 33555 -0 678404 -0 46068 -1 057513 -0 30629 l -11 318243 4 60303 0 -26 97635 C 5 441639 -47 58228 5 035926 -48 4 534681 -48 l -9 06959 0 c -0 501246 0 -0 906959 0 41772 -0 906959 0 9338 l 0 26 97635 -11 317637 -4 60303 c -0 379109 -0 15439 -0 812031 -0 0286 -1 057515 0 30629 -0 245483 0 33492 -0 244275 0 79809 0 0055 1 13114 L -0 718973 -0 36481 C -0 547255 -0 13509 -0 281818 0 -5 7002158e-5 0 Z       strokeColor   black       strokeOpacity  1      strokeWeight  1      fillColor    fefe99       fillOpacity  1      rotation  0      scale  1 0       function init      map   new google maps Map document getElementById  map canvas          center  map center      zoom  4      mapTypeId  google maps MapTypeId HYBRID         arrow options         position  map center      icon  arrow icon      clickable  false      draggable  true      crossOnDrag  true      visible  true      animation  0      title   I am a Draggable-Rotatable Marker           arrow marker   new google maps Marker arrow options     arrow marker setMap map     function setRotation      var heading   parseInt document getElementById  rotation value   value     if  isNaN heading   heading   0    if  heading  lt  0  heading   359    if  heading  gt  359  heading   0    arrow icon rotation   heading    arrow marker setOptions  icon arrow icon      document getElementById  rotation value   value   heading     lt  script gt   lt  head gt   lt body id  document body  onload  init     gt     lt div id  rotation control  gt       lt small gt Enter heading to rotate marker amp nbsp  amp nbsp  amp nbsp  amp nbsp  lt  small gt      Heading amp deg  lt input id  rotation value  type  number  size  3  value  0  onchange  setRotation       gt       lt small gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp Drag marker to place marker lt  small gt       lt  div gt       lt div id  map canvas  gt  lt  div gt   lt  body gt   lt  html gt    This is exactly what Google does for it s own few symbols available in the SYMBOL class of the Maps API  so if that doesn t convince you    Anyway  I hope this will help you to correctly make and set up a SVG marker for your Google maps endevours

User · Answer

OK  I done this soon in my web I try two ways to create the custom google map marker  this run code use canvg js is the best compatibility for browser the Commented-Out Code is not support IE11 urrently    x000D   x000D  var marker  x000D  var CustomShapeCoords    16  1 14  21  2 1  25  4 2  28  7 4  30  11 3  30 6  15 74  25 85  26 49  21 02  31 89  15 92  43 86  10 92  31 89  5 9  26 26  1 4  15 74  2 1  11 3  4  7 4  7 1  4 2  11  2 1  16  1 14   x000D   x000D  function initMap     x000D    var map   new google maps Map document getElementById  map      x000D      zoom  13  x000D      center    x000D        lat  59 325  x000D        lng  18 070 x000D        x000D        x000D    var markerOption     x000D      latitude  59 327  x000D      longitude  18 067  x000D      color         000   x000D      text   ha  x000D       x000D    marker   createMarker markerOption   x000D    marker setMap map   x000D    marker addListener  click   changeColorAndText   x000D     x000D   x000D  function changeColorAndText     x000D    var iconTmpObj   createSvgIcon    c00    ok     x000D    marker setOptions    x000D                  icon  iconTmpObj x000D                   x000D     x000D   x000D  function createMarker options    x000D      IE MarkerShape has problem x000D    var markerObj   new google maps Marker   x000D      icon  createSvgIcon options color  options text   x000D      position    x000D        lat  parseFloat options latitude   x000D        lng  parseFloat options longitude  x000D         x000D      draggable  false  x000D      visible  true  x000D      zIndex  10  x000D      shape    x000D        coords  CustomShapeCoords  x000D        type   poly  x000D        x000D        x000D   x000D    return markerObj  x000D     x000D   x000D  function createSvgIcon color  text    x000D    var div       lt div gt  lt  div gt     x000D   x000D    var svg      x000D        lt svg width  32px  height  43px   viewBox  0 0 32 43  xmlns  http   www w3 org 2000 svg  gt     x000D        lt path style  fill  FFFFFF stroke  020202 stroke-width 1 stroke-miterlimit 10   d  M30 6 15 737c0-8 075-6 55-14 6-14 6-14 6c-8 075 0-14 601 6 55-14 601 14 6c0 4 149 1 726 7 875 4 5 10 524c1 8 1 801 4 175 4 301 5 025 5 625c1 75 2 726 5 11 976 5 11 976s3 325-9 25 5 1-11 976c0 825-1 274 3 05-3 6 4 825-5 399C28 774 23 813 30 6 20 012 30 6 15 737z   gt     x000D        lt circle style  fill     color       cx  16  cy  16  r  11   gt     x000D        lt text x  16  y  20  text-anchor  middle  style  font-size 10px fill  FFFFFF   gt     text     lt  text gt     x000D        lt  svg gt   x000D       x000D    div append svg   x000D   x000D    var dd       lt canvas height  50px  width  50px  gt  lt  cancas gt     x000D   x000D    var svgHtml   div 0  innerHTML  x000D   x000D    canvg dd 0   svgHtml   x000D   x000D    var imgSrc   dd 0  toDataURL  image png    x000D       scaledSize  and  optimized  false  together seems did the tricky ---IE11   amp  amp   viewBox influent IE scaledSize x000D      var svg     lt svg width  32px  height  43px   viewBox  0 0 32 43  xmlns  http   www w3 org 2000 svg  gt   x000D              lt path style  fill  FFFFFF stroke  020202 stroke-width 1 stroke-miterlimit 10   d  M30 6 15 737c0-8 075-6 55-14 6-14 6-14 6c-8 075 0-14 601 6 55-14 601 14 6c0 4 149 1 726 7 875 4 5 10 524c1 8 1 801 4 175 4 301 5 025 5 625c1 75 2 726 5 11 976 5 11 976s3 325-9 25 5 1-11 976c0 825-1 274 3 05-3 6 4 825-5 399C28 774 23 813 30 6 20 012 30 6 15 737z   gt   x000D              lt circle style  fill     color       cx  16  cy  16  r  11   gt   x000D              lt text x  16  y  20  text-anchor  middle  style  font-size 10px fill  FFFFFF   gt     text     lt  text gt   x000D              lt  svg gt    x000D      var imgSrc    data image svg xml charset UTF-8     encodeURIComponent svg   x000D   x000D    var iconObj     x000D      size  new google maps Size 32  43   x000D      url  imgSrc  x000D      scaledSize  new google maps Size 32  43  x000D       x000D   x000D    return iconObj  x000D     x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt title gt Your Custom Marker  lt  title gt  x000D     lt style gt  x000D         Always set the map height explicitly to define the size of the div x000D           element that contains the map     x000D       map   x000D        height  100   x000D        x000D         Optional  Makes the sample page fill the window     x000D      html  x000D      body   x000D        height  100   x000D        margin  0  x000D        padding  0  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div id  map  gt  lt  div gt  x000D       lt script src  https   canvg github io canvg canvg js  gt  lt  script gt  x000D       lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D       lt script async defer src  https   maps googleapis com maps api js callback initMap  gt  lt  script gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

If you need a full svg not only a path and you want it to be modifiable on client side  e g  change text  hide details       you can use an alternative data  URL  with included svg   var svg     lt svg width  400  height  110  gt  lt rect width  300  height  100    gt  lt  svg gt    icon url    data image svg xml charset UTF-8 base64     btoa svg     JavaScript  Firefox  btoa   is used to get the base64 encoding from the SVG text  Your may also use http   dopiaza org tools datauri index php to generate base data URLs   Here is a full example jsfiddle    lt  DOCTYPE html gt   lt html gt       lt head gt           lt meta http-equiv  content-type  content  text html  charset UTF-8    gt           lt script src  http   maps google com maps api js sensor false  type  text javascript  gt  lt  script gt       lt  head gt       lt body gt           lt div id  map  style  width  500px  height  400px   gt  lt  div gt           lt script type  text javascript  gt              var map   new google maps Map document getElementById  map                      zoom  10                  center  new google maps LatLng -33 92  151 25                   mapTypeId  google maps MapTypeId ROADMAP                              var template                       lt  xml version  1 0   gt                          lt svg width  26px  height  26px  viewBox  0 0 100 100  version  1 1  xmlns  http   www w3 org 2000 svg  gt                              lt circle stroke   222  fill     color     cx  50  cy  50  r  35   gt                          lt  svg gt                     join   n                var svg   template replace     color        800                 var docMarker   new google maps Marker                   position  new google maps LatLng -33 92  151 25                   map  map                  title   Dynamic SVG Marker                   icon    url   data image svg xml charset UTF-8     encodeURIComponent svg   scaledSize  new google maps Size 20  20     optimized  false                              var docMarker   new google maps Marker                   position  new google maps LatLng -33 95  151 25                   map  map                  title   Dynamic SVG Marker                   icon    url   data image svg xml charset UTF-8 base64     btoa svg   scaledSize  new google maps Size 20  20     optimized  false                          lt  script gt       lt  body gt   lt  html gt    Additional Information can be found here   Avoid base64 encoding   In order to avoid base64 encoding you can replace  data image svg xml charset UTF-8 base64     btoa svg  with  data image svg xml charset UTF-8     encodeURIComponent svg   This should work with modern browsers down to IE9  The advantage is that encodeURIComponent is a default js function and available in all modern browsers  You might also get smaller links but you need to test this and consider to use   instead of   in your svg    Also see Optimizing SVGs in data URIs for additional info   IE support  In order to support SVG Markers in IE one needs two small adaptions as described here  SVG Markers in IE  I updated the example code to support IE

[google-maps] How to use SVG markers in Google Maps API v3

Examples related to google-maps

Examples related to google-maps-api-3

Examples related to svg