13

I have a map that I have created in rails using the google maps for rails gem. It works in Chrome and Safari but it does not display custom .svg markers in Firefox 29. It does display the custom image for clusters (which is a png).

I have bumped into a number of threads from the far past (FF 8 and 9) that said there was an issue that was resolved in 9 or 10 related to cors. However, it does not seem like it has been an issue for awhile, and especially not for 29.

Does anyone know if this is a firefox issue or google maps for rails gem issue? If it is either one what is the solution.

Update: Swapping svg for png works for now. This does not however solve the underlying issue. I would like to use a svg so I can pass in color variables.

Still no luck, both chrome and firefox show that the image is being download in developer tools. The image is viewable in firefox and chrome in the images directory. Below is the code for my SVG:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 17.1.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" id="Layer_1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
 viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
     <circle fill="#45A6DD" cx="7.5" cy="7.5" r="5.6"/>
   </svg>
1
  • gmaps4rails doesnt make anything particular, just delegates everything to google maps May 29, 2014 at 7:30

3 Answers 3

30

Try defining a width and height for your SVG

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 17.1.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" id="Layer_1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px" height="20px" width="20px"
 viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
     <circle fill="#45A6DD" cx="7.5" cy="7.5" r="5.6"/>
   </svg>

I have found that it can be picky when drawing SVGs with no defined width/height.

Addition

@Justin Lau has added that the marker when defined in Javascript will need the original size, even if you're using scaledSize

Many thanks to Justin for the contribution.

7
  • Nah, didn't do it... I think it has something to do with the svg itself. @Idiot211
    – AlexSilva
    Jun 18, 2014 at 14:29
  • this might be one of the most time saving answers I've come across here. Well done and thanks
    – Rob Allen
    Apr 29, 2015 at 20:31
  • top answer, nailed it!
    – Joe Lloyd
    Jun 8, 2017 at 13:51
  • 1
    Oh wow. It wants height an width. For a vector image. This damn browser has really replaced Internet Explorer as my most hated one.
    – j4k3
    Jan 30, 2018 at 9:12
4

Need to add a detail - when an SVG is served via a data URL and the SVG is URL encoded (not base64..), Firefox seems to choke on '#' so I had to switch to using fill="rgb()" notation and/or named colors.

Some references as to why / when to use data URL for SVG: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris How to use SVG markers in Google Maps API v3

Hope this helps someone!

2
  • Thank you so much -- I know these sort of comments aren't allowed but you just saved me an inordinate amount of time ripping out my hair. None of the other suggestions worked. Cheers!!!!
    – tdc
    Jun 22, 2016 at 19:50
  • Really happy that helped :-) I haven't gotten around to filing a bug with Mozilla, I fully intend to but if you get a chance that would be brilliant!
    – Jonno
    Jun 26, 2016 at 11:20
2

To supplement Idiot211's answer, besides adding the width and height attributes to the SVG element, you must define the marker icon object with size to make it works on FireFox, if you only have scaledSize previously.

// es6 syntax
const markerIcon = {
    url: '../map-marker.svg',
    size: new google.maps.Size(100, 100),     // original size you defined in the SVG file
    scaledSize: new google.maps.Size(50, 50), // desired display size
    anchor: new maps.Point(25, 50),
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.