SVG Marker on Google Maps Not Appearing

Question

When I copy Google's example code for SVG markers, everything works fine, but when I create my own SVG marker in Inkscape, the icon doesn't appear.

var walkIcon = {
    path: 'm 375.65048,522.72658 c 1.40058,1.33792 3.38088,2.4914 3.58389,4.62022 0.33282,1.7212 1.62154,3.13596 3.271,3.67594 1.03889,0.25403 1.6602,2.07967 0.0883,1.75669 -1.5495,-0.2461 -2.78641,-1.31821 -4.00567,-2.21914 -0.57041,-1.04216 -2.10653,-2.1964 -2.20994,-0.258 -0.60169,1.67286 -0.81673,3.54682 -0.27676,5.26583 1.3796,2.02895 3.11363,3.98448 3.62242,6.44838 -0.004,1.73794 0.0823,3.64805 -0.39463,5.27182 -1.57371,1.38487 -2.26199,-1.26632 -1.80003,-2.45547 0.30135,-2.07993 -0.51524,-4.4087 -2.43603,-5.44795 -0.91738,-0.55389 -2.37786,-2.14177 -3.31182,-0.87977 -1.44621,2.91511 -2.45985,6.07291 -4.32864,8.76654 -0.62298,1.65832 -2.82533,0.6639 -2.23248,-0.96726 0.48335,-1.02152 0.93088,-2.07927 1.33985,-3.16116 0.97621,-2.34602 2.13243,-4.61044 3.21895,-6.90591 -0.21478,-3.47134 0.21092,-7.1221 2.03567,-10.15065 -1.74077,0.12515 -3.53761,1.46119 -3.55105,3.32307 -0.50221,1.12378 0.13004,3.17833 -0.99826,3.7379 -1.29058,-0.90986 -0.8282,-2.65883 -0.76503,-3.99023 0.22251,-2.66697 2.17436,-4.98661 4.63974,-5.93494 1.34969,-0.61406 2.89399,-0.89149 4.3562,-0.56217 1.4252,-0.88097 -0.89925,-2.00716 -0.5144,-3.24679 0.0125,-2.19929 3.36155,-3.1618 4.5599,-1.33053 1.06332,1.38806 0.40227,3.8766 -1.47801,4.08849 -0.81411,0.22503 -2.02129,-0.56788 -2.41318,0.55509 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
};

I suspect it has something to do with the way I'm generating this icon -- opening the saved Inkscape SVG file in gEdit and copying the d value from here:

     <path
   style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
   d="m 375.65048,522.72658 c 1.40058,1.33792 3.38088,2.4914 3.58389,4.62022 0.33282,1.7212 1.62154,3.13596 3.271,3.67594 1.03889,0.25403 1.6602,2.07967 0.0883,1.75669 -1.5495,-0.2461 -2.78641,-1.31821 -4.00567,-2.21914 -0.57041,-1.04216 -2.10653,-2.1964 -2.20994,-0.258 -0.60169,1.67286 -0.81673,3.54682 -0.27676,5.26583 1.3796,2.02895 3.11363,3.98448 3.62242,6.44838 -0.004,1.73794 0.0823,3.64805 -0.39463,5.27182 -1.57371,1.38487 -2.26199,-1.26632 -1.80003,-2.45547 0.30135,-2.07993 -0.51524,-4.4087 -2.43603,-5.44795 -0.91738,-0.55389 -2.37786,-2.14177 -3.31182,-0.87977 -1.44621,2.91511 -2.45985,6.07291 -4.32864,8.76654 -0.62298,1.65832 -2.82533,0.6639 -2.23248,-0.96726 0.48335,-1.02152 0.93088,-2.07927 1.33985,-3.16116 0.97621,-2.34602 2.13243,-4.61044 3.21895,-6.90591 -0.21478,-3.47134 0.21092,-7.1221 2.03567,-10.15065 -1.74077,0.12515 -3.53761,1.46119 -3.55105,3.32307 -0.50221,1.12378 0.13004,3.17833 -0.99826,3.7379 -1.29058,-0.90986 -0.8282,-2.65883 -0.76503,-3.99023 0.22251,-2.66697 2.17436,-4.98661 4.63974,-5.93494 1.34969,-0.61406 2.89399,-0.89149 4.3562,-0.56217 1.4252,-0.88097 -0.89925,-2.00716 -0.5144,-3.24679 0.0125,-2.19929 3.36155,-3.1618 4.5599,-1.33053 1.06332,1.38806 0.40227,3.8766 -1.47801,4.08849 -0.81411,0.22503 -2.02129,-0.56788 -2.41318,0.55509 z"
   id="path3770"
   inkscape:connector-curvature="0" />

NOTE:

This is in reference to custom symbols, not markers. Docs here: https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-custom

@geocodezip is there a limit to size? On a hunch I removed all the letters C and L -- they aren't in Google's example -- and the image was a gigantic mess of triangles, but at least displayed. — Jason Silver, Jun 18 '15 at 17:40
I was remembering [this statement from the documentation: Note: Vector paths on a polyline must fit within a 22x22px square.](https://developers.google.com/maps/documentation/javascript/symbols#properties), but that may not apply to you. — geocodezip, Jun 18 '15 at 17:49
Downvoter, explain why the downvote? This is a legitimate question. — Jason Silver, Jun 18 '15 at 18:19

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

For me the Symbol works, but it's not at the desired position.

Use the anchor-property, e.g. anchor:new google.maps.Point(375,522)

See also: Google Maps API: SVG Marker moves relative to map when you zoom

function initialize() {
var mapOptions = {
            
            zoom: 7,
            
            center: new google.maps.LatLng(49.5,51)
            
        };
        var walkIcon={
    path: 'm 375.65048,522.72658 c 1.40058,1.33792 3.38088,2.4914 3.58389,4.62022 0.33282,1.7212 1.62154,3.13596 3.271,3.67594 1.03889,0.25403 1.6602,2.07967 0.0883,1.75669 -1.5495,-0.2461 -2.78641,-1.31821 -4.00567,-2.21914 -0.57041,-1.04216 -2.10653,-2.1964 -2.20994,-0.258 -0.60169,1.67286 -0.81673,3.54682 -0.27676,5.26583 1.3796,2.02895 3.11363,3.98448 3.62242,6.44838 -0.004,1.73794 0.0823,3.64805 -0.39463,5.27182 -1.57371,1.38487 -2.26199,-1.26632 -1.80003,-2.45547 0.30135,-2.07993 -0.51524,-4.4087 -2.43603,-5.44795 -0.91738,-0.55389 -2.37786,-2.14177 -3.31182,-0.87977 -1.44621,2.91511 -2.45985,6.07291 -4.32864,8.76654 -0.62298,1.65832 -2.82533,0.6639 -2.23248,-0.96726 0.48335,-1.02152 0.93088,-2.07927 1.33985,-3.16116 0.97621,-2.34602 2.13243,-4.61044 3.21895,-6.90591 -0.21478,-3.47134 0.21092,-7.1221 2.03567,-10.15065 -1.74077,0.12515 -3.53761,1.46119 -3.55105,3.32307 -0.50221,1.12378 0.13004,3.17833 -0.99826,3.7379 -1.29058,-0.90986 -0.8282,-2.65883 -0.76503,-3.99023 0.22251,-2.66697 2.17436,-4.98661 4.63974,-5.93494 1.34969,-0.61406 2.89399,-0.89149 4.3562,-0.56217 1.4252,-0.88097 -0.89925,-2.00716 -0.5144,-3.24679 0.0125,-2.19929 3.36155,-3.1618 4.5599,-1.33053 1.06332,1.38806 0.40227,3.8766 -1.47801,4.08849 -0.81411,0.22503 -2.02129,-0.56788 -2.41318,0.55509 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1,
    anchor:new google.maps.Point(375,522)
}
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        new google.maps.Polyline( { 
          strokeColor:'#000000', 
          strokeOpacity: 1.0, 
          strokeWeight: 3, 
          editable: true, 
          icons:[ { icon: walkIcon, offset: '0%'}],
          map:map,
          path:[new google.maps.LatLng(50, 50),new google.maps.LatLng(50, 52),new google.maps.LatLng(49, 51),new google.maps.LatLng(50, 50)]
        
        });  
      }
      google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>

edited May 23 '17 at 11:52

Community

1
1

answered Jun 18 '15 at 17:48

Dr.Molle

116,463
16
195
201

I see anchor referred to in markers, but not on poly lines -- are you referring to poly lines? – Jason Silver Jun 18 '15 at 17:51
Im referring to symbols(that's what a SVG-Marker is): https://developers.google.com/maps/documentation/javascript/reference?hl=en&csw=1#Symbol – Dr.Molle Jun 18 '15 at 17:52
Hm, my polyOptions are now: var polyOptions = { strokeColor: '#000000', strokeOpacity: 1.0, strokeWeight: 3, editable: true, icons:[ { icon: walkIcon, offset: '0%', anchor:new google.maps.Point(375,522)}]}; -- still not showing – Jason Silver Jun 18 '15 at 18:00
I'm not sure what you are talking about, a Symbol is not a Polyline. – Dr.Molle Jun 18 '15 at 18:03
Check out the link at the bottom of my question. I am trying to put symbols on the line like in Google's example. – Jason Silver Jun 18 '15 at 18:04
But I didn't say that you should set the anchor for the Polyline, you must set it for the Icon – Dr.Molle Jun 18 '15 at 18:05
Still not working when placed in the walkIcon object: var walkIcon = { path: 'm 375.65048,522.72658...snip... z', strokeColor: '#F00', fillColor: '#F00', fillOpacity: 1, anchor:new google.maps.Point(375,522) }; – Jason Silver Jun 18 '15 at 18:18
I really don't get why this answer was upvoted-- it doesn't address poly lines at all, and @dr-molle doesn't even seem to know what a polyline symbol is – Jason Silver Jun 19 '15 at 15:38
What's your problem? I gave my answer before you've edited your question, and before the edit your question didn't even contain the term "Polyline", your question was about Symbols(it's still about symbols). And instead of telling some nonsense you might have been clicked on the **"run code snippet"**- button at the bottom of my answer, you would see a polyline with your symbol, and all without modifying the SVG-path. Maybe you didn't understand what a SVG is, it's a **Scalable** Vector Graphic, you don't need to modify any path to scale such a format. – Dr.Molle Jun 20 '15 at 01:09
No problem, I just wasn't satisfied with your answer. Were you also the one who downvoted my question and my answers? – Jason Silver Jun 21 '15 at 01:25
Of course, both are not good. Your question expects an answer to a fact that hasn't been mentioned with any word in the question, and your answer suggests to scale a SVG by modifying a path, although a SVG may be scaled to any size(you may have noticed the scale-property in your answer, what do think it's good for) ...and positioned too(see my answer)...without modifying a path. – Dr.Molle Jun 21 '15 at 08:27
However, I feel it's only fair to indicate why you think a question is worth a downvote, especially to a novice like me. And when you vote down other answers, you just look petty. – Jason Silver Jun 22 '15 at 21:39

score -1 · Accepted Answer · edited May 23 '17 at 12:08

After @geocodezip mentioned that it looked too big, I found the solution from another stackoverflow post.

Even though I had tried to resized the image in Inkscape to be a small 24 pixel icon, this wasn't sufficient to make the icon appear at all.

I found this post, which was the solution to my problem: Create custom symbol on polyline using SVG path

To reiterate the solution here, I opened the SVG image in this web application: http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html

Within this application, I resized it to be the right dimensions, then clicked 'save.' Doing so gave me a new SVG data string of coordinates which I then used in my Google maps walkIcon object:

var walkIcon = {
    path: 'm-10.569659,-22.855438c0.270996,0.474976 0.757995,0.494995 0.91101,1.026978c0.078003,1.862976 1.925995,1.731995 1.266998,2.541992c-0.53302,-0.060974 -1.026001,-0.382019 -1.256012,-0.788025c-0.988006,-1.303955 -0.949004,0.162048 -0.781005,1.778015c0.433014,0.720032 0.893005,0.843018 1.137023,2.289001c0.084991,2.093018 -0.759002,2.656006 -0.71701,0.603027c0.006012,-1.254028 -0.82199,-2.17804 -1.536986,-1.992004c-0.637024,1.680969 -1.933015,4.01001 -2.35202,3.450012c-0.45099,-0.331055 0.390015,-1.277039 0.812012,-2.232056c1.247986,-1.811951 0.440002,-3.784973 1.312988,-5.483948c-0.546997,0.044006 -0.81601,0.470947 -1.11499,1.178955c-1.005005,3.544006 -1.175995,-0.994995 0.651001,-2.084961c0.632996,-0.392029 1.160004,-0.427002 1.618988,-0.311035c0.447021,-0.312012 -0.28299,-0.711975 -0.161987,-1.151978c0.003998,-0.781006 1.054993,-1.122986 1.431,-0.471985c0.333008,0.492004 0.126007,1.375977 -0.46402,1.450989c-0.254974,0.080017 -0.633973,-0.202026 -0.756989,0.197021l0,0z',
    scale: 1, 
    strokeColor: 'green',
    fillColor: 'green',
    fillOpacity: 1
};

Thanks to @geocodezip!

SVG Marker on Google Maps Not Appearing

2 Answers2